<declarative-shadow-dom>

Custom Element to create Shadow DOM in a declarative manner

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

Demo

Install

Install the component using Bower:

$ bower install declarative-shadow-dom --save

Or download as ZIP.

Usage

Import custom elements builtin extends polyfill if needed

<script src="//unpkg.com/@ungap/custom-elements-builtin"></script>

Import custom element:

import 'declarative-shadow-dom';

<script src="node_modules/declarative-shadow-dom/declarative-shadow-dom.js"></script>

Start using it!

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

How it works:

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.

How I would like it to work

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.

Speced behavior

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

Options

Attribute	Options	Default	Description
mode	'open','closed'	required	mode of the shadow root to create

Methods

Method	Parameters	Returns	Description
`appendToParentsShadowRoot()`	None	Nothing	Appends content to parent element's shadow root.

Events

Event	Description
`declarative-shadow-dom-stamped`	Fired on a parent/host when Shadow DOM is stamped

Caveats

With native customized builtins, the CE reactions may be called before template's .content is available. In such cases, the element waits for setTimeout(*, 0) so your content would be stamped slightly asynchronously, or for the next parent mutation. Therefore, if you would like to make sure your shadow DOM available synchronously, add any node after <template is="declarative-shadow-dom">…</template>.

tomalec/declarative-shadow-dom