The Shadow DOM specification addresses this encapsulation problem. When using the Shadow DOM, elements can get a new kind of node associated with them. This new kind of node is called a shadow root. An element that has a shadow root associated with is called a shadow host. The content of a shadow host isn’t rendered. The content of the shadow root is rendered instead.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Shadow DOM Sample</title> </head> <body> <bt>Hello, world!</bt> <script> var host = document.querySelector('bt'); var root = host.createShadowRoot(); root.textContent = "שלום"; </script> </body> </html>
The following video clip shows the execution of this code sample and explains it. The use of Shadow DOM is popular in frameworks such as AngularJS.