Shadow DOM is designed to provide encapsulation by hiding DOM subtrees under shadow roots. It provides a method of establishing and maintaining functional boundaries between DOM trees and how these trees interact with each other within a document, thus enabling better functional encapsulation within the DOM. See the W3C specification for details.
Include the polyfill in your HTML
<head> to enable Shadow DOM:
You can also use a minified version for deployment:
Because it does extensive DOM patching, it should be included before other script tags.
var el = new DivElement(); var shadow = el.createShadowRoot(); shadow.innerHtml = '<content select="h1"></content>';
Shadow DOM allows a single node to express three subtrees: light DOM, shadow DOM, and composed DOM.
A component user supplies the light DOM; the node has a (hidden) shadow DOM; and the composed DOM is what is actually rendered in the browser. At render time, the light DOM is merged with the shadow DOM to produce the composed DOM. For example:
<my-custom-element> <!-- everything in here is my-custom-element's light DOM --> <q>Hello World</q> </my-custom-element>
<!-- shadow-root is attached to my-custom-element, but is not a child --> <shadow-root> <!-- everything in here is my-custom-element's shadow DOM --> <span>People say: <content></content></span> </shadow-root>
Composed (rendered) DOM
<!-- rendered DOM --> <my-custom-element> <span>People say: <q>Hello World</q></span> </my-custom-element>
The following is true about this example:
<my-custom-element>is visible to the user as its normal subtree. It can expressed by
.innerHtmlor any other property or method that gives you information about a node's subtree.
So, while in the final rendered tree
<span> is a child of
<my-custom-element> and the parent of
<q>, interrogating those nodes will tell you that the
<span> is a child of
<q> is a child of
<my-custom-element>, and that those two nodes are unrelated.
In this way, the user can manipulate light DOM or shadow DOM directly as regular DOM subtrees, and let the system take care of keeping the render tree synchronized.
This package is built from: https://github.com/dart-lang/ShadowDOM/tree/conditional_shadowdom
You'll need node.js to rebuild the JS file. Use
npm install to get dependencies and
grunt to build.