<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
-
Import polyfill:
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
-
Import custom element:
<link rel="import" href="bower_components/declarative-shadow-dom/declarative-shadow-dom.html">
-
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 |
History
For detailed changelog, check Releases.
License
MIT