Custom Element to create Shadow DOM in a declarative manner

It's supposed to work closely with proposal given at w3c/webcomponents/proposals/Declarative-Shadow-DOM

Check it live!

Install the component using Bower:

$ bower install declarative-shadow-dom --save

Or download as ZIP.

1. Import polyfill:

   <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>

2. Import custom element:

   <link rel="import" href="bower_components/declarative-shadow-dom/declarative-shadow-dom.html">
   <!-- or if you are not using HTML Imports -->
   <script src="bower_components/declarative-shadow-dom/declarative-shadow-dom.html"></script>

3. Start using it!

   <anyelement>
       <template is="declarative-shadow-dom" mode="open">
           Shadow Content here
           <slot></slot>
       </template>
       Light DOM content here
   </anyelement>

When it's connected or appendToParentsShadowRoot is called it "stamps" - appends it create shadow root in its parent node and appends its content there, then removes itself from the parent node.

• Ha! Work natively, without any JavaScript,
• to stamp only when created declaratively (parsing, .innerHTML),
• do nothing when created imperatively,
• to stamp when the element is created, not when connected - Unfortunately, CE does not allow us to get the reference to .parentNode in constructor.

See the Declarative-Shadow-DOM spec proposal and the test suite of this element

For detailed changelog, check Releases.

MIT