Declarative-shadow-dom NPM

<declarative-shadow-dom>

Custom Element to create Shadow DOM in a declarative manner

Demo

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

Contributing and Development

History

For detailed changelog, check Releases.

License

MIT

@everything-registry/sub-chunk-1458

0.0.1

7 years ago