Translate-ShadowDOM 

Set 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.

$3


$3

If you have Shadow DOM prepared for V1
``html




`
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 get
`html

`
So, it would get rendered as you would expect in V1:
`html

Shadow DOM prepared for V1

I want to be distributed as in V1

`

Related custom elements

- - applies Document Fragment to Shadow DOM

Features

- Translates strings,
- Modifies DocumentFragments,
- Preserves attributes,
- Translates HTML, CSS and basic JS
- works both ways between V0 and V1

Install


Install the component using Bower:

`sh
$ bower install translate-shadowdom --save
`
npm
`sh
$ npm install translate-shadowdom --save
`

Or download as ZIP.




API

$3

#### TranslateShadowDOM.v1tov0.html(_String_ compositionString) : _String_

Translates the HTML given in string, replacing all smth with smth

#### 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.
If withStyle is set to true, will also translate CSS selectors in enclosed