Set of utilities to transform Shadow DOM v1 to v0
npm install translate-shadowdomSet of utilities to translate between Shadow DOM v0 and v1 (both ways).
Usefull, when writing "hybrid" Web Components which are V1 ready, but run in V0 environment/polyfill;
or when runnung legacy code in V1 environment.
If you have Shadow DOM prepared for V1 I want to be distributed as in V1 I want to be distributed as in V1
``html`
Shadow DOM prepared for V1
`
You can now use it in your current app/element running on V0 environment (like current webcomponentsjs polyfill)javascript`
let sRoot = myElement.createShadowRoot();
sRoot.innerHTML = TranslateShadowDOM.v1tov0.html(compositionString);
// or if you already have it parsed as document fragment
TranslateShadowDOM.v1tov0.fragment(documentfragment, true);`
To gethtml`
Shadow DOM prepared for V1
`
So, it would get rendered as you would expect in V1:html`
Shadow DOM prepared for V1
-
- Translates strings,
- Modifies DocumentFragments,
- Preserves attributes,
- Translates HTML, CSS and basic JS
- works both ways between V0 and V1
Install the component using Bower:
`sh`
$ bower install translate-shadowdom --save`
npmsh`
$ npm install translate-shadowdom --save
Or download as ZIP.
#### TranslateShadowDOM.v1tov0.html(_String_ compositionString) : _String_
Translates the HTML given in string, replacing all with
#### TranslateShadowDOM.v1tov0.slot(_HTMLElement_ slot) : _ContentElement_
Replaces given SlotElement (or UnknownElement ) with ContentElement ().
#### TranslateShadowDOM.v1tov0.fragment(_HTMLElement | DocumentFragment_ root, _Boolean_ withStyle, _Boolean_ withScript) : _HTMLElement | DocumentFragment_
Replaces all SlotElements (or UnknownElements ) with ContentElements () in given root.withStyle
If is set to true, will also translate CSS selectors in enclosed