Что является альтернативой для Element.createShadowRoot()?

Question

Я использую этот кусок кода:

function setShadowDOM(i, css){ 
    [].forEach.call(document.getElementsByTagName(i), function(hostVal) { 
     var _root = hostVal.createShadowRoot(); 
      _root.innerHTML = '<style>:host ' + css + '</style><content></content>'; 
    }) 
} 

Я также reading this.

Как это решить? Что было бы альтернативой?

Answer 1

Теперь вы можете использовать attachShadow() вместо createShadowRoot():

• Он находится в Chrome implemented natively (53+), Opera (40+) и Safari (10).

• Там также polyfill командой webcomponents.js: ShadyDOM.

The Shadow DOM v1 является DOM Living Standard.

Вы можете поддержать его реализацию для Edge и для Firefox.

Answer 2

MDN docs сказать вам использовать attachShadow вместо ... но эта функция сама помечено как нестандартным и полностью поддерживается любым браузером на данный момент:

До тех пор, пока не будет стандарта, который имеет приличную поддержку браузера, лучше всего использовать webcomponents.js (который действует как polyfill) или Polymer (который имеет свой собственный API), если вы хотите использовать веб-компоненты.

Поскольку даже webcomponents.js не поддерживает attachShadow, ваши варианты на данный момент являются либо:

• продолжать использовать Element.createShadowRoot() и использовать webcomponents.js для polyfilling этой функции в неподдерживаемых браузерах

... или до:

• Поместите свои веб-компоненты в Polymer (Что означает, что вы должны использовать API полимера вместо)

Многие люди предпочитают Polymer к webcomponents.js, именно потому, что он имеет свой собственный API. Если вы используете Polymer, ваш код, скорее всего, будет надежным, потому что конкретная реализация веб-компонентов происходит под капотом, и любые изменения в этой реализации с меньшей вероятностью влияют на собственный API Polymer.