declarative-shadow-dom

<declarative-shadow-dom>

Custom Element to create Shadow DOM in a declarative manner

Demo

Check it live!

Install

Install the component using Bower:

$ bower install declarative-shadow-dom --save

Or download as ZIP.

Usage

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">
   

3. Start using it!

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

Options

Attribute	Options	Default	Description
disabled	Boolean	false	if set to true, the element will not stamp itself
stamped	Boolean		attribute that reflects whether the element is stamped or not, you can change it to stamp or clear the Shadow DOM

Methods

Method	Parameters	Returns	Description
appendToParentsShadowRoot()	None.	Nothing.	Appends content to parent element's shadow root, create one if needed.

Events

Event	Description
declarative-shadow-dom-stamped	Triggers when Shadow DOM is stamped

Contributing and Development

History

For detailed changelog, check Releases.

License

MIT