Was ist die Alternative für Element.createShadowRoot()? dieses Stück Code

Question

Ich verwende:

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

Ich bin auch reading this.

Wie löst man das? Was wäre die Alternative?

Answer 1

Jetzt können Sie attachShadow() anstelle von createShadowRoot():

• Es ist implemented natively in Chrome (53+), Opera (40+) und Safari (10).

• Es gibt auch ein polyfill vom webcomponents.js Team: ShadyDOM.

Das Shadow DOM v1 ist ein DOM Living Standard. Sie können die Implementierung für Edge und für Firefox unterstützen.

Answer 2

Die MDN docs zu Ihnen sagen attachShadow stattdessen zu verwenden ... aber das Feature selbst als Nicht-Standard und völlig ohne Unterstützung von jedem Browser zur Zeit gekennzeichnet ist:

Bis es einen Standard mit anständiger Browserunterstützung gibt, verwenden Sie am besten webcomponents.js (das als polyfill fungiert) oder Polymer (das über eine eigene API verfügt), wenn Sie Webkomponenten verwenden möchten.

Wie auch webcomponents.js nicht unterstützt attachShadow, Ihre Optionen sind im Moment entweder:

• keep Element.createShadowRoot() und verwenden webcomponents.js für polyfilling diese Funktion in nicht unterstützten Browsern

... oder zu:

• Port Ihre Web-Komponenten zu Polymer (Was bedeutet, sollten Sie Polymer API verwenden, anstatt)

Viele Menschen bevorzugen Polymer-webcomponents.js, gerade weil es seine eigene API hat. Wenn Sie Polymer verwenden, ist Ihr Code eher zukunftssicher, da die genaue Webkomponentenimplementierung unter der Oberfläche stattfindet und Änderungen an dieser Implementierung sich weniger auf die API von Polymer auswirken.