<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