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（53 +），Opera（40 +），Safari（10+）和Firefox（63 +）中的implemented natively

• webcomponents.js小组还有 a polyfill ：ShadyDOM。

Shadow DOM v1是DOM Living Standard。

Edge将很快采用Chromium引擎，然后它将符合Shadow DOM v1。

Answer 2

MDN docs告诉您使用attachShadow代替......但该功能本身已被标记为非标准功能，目前完全不受任何浏览器的支持：

在有标准的浏览器支持之前，如果您愿意，最好使用webcomponents.js（充当polyfill）或Polymer（有自己的API）使用网络组件。

由于偶数webcomponents.js不支持attachShadow，您目前的选择是：

• 继续使用Element.createShadowRoot()并使用webcomponents.js在不受支持的浏览器中填充此功能

......或者：

• 将您的网络组件移植到Polymer（这意味着您应该使用Polymer的API）

很多人更喜欢Polymer到webcomponents.js，正是因为它有自己的API。如果您使用Polymer，您的代码更有可能面向未来，因为确切的Web组件实现是在幕后进行的，对该实现的任何更改都不太可能影响Polymer自己的API。