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()：

• implemented原生于Chrome（53 +），Opera（40+），Safari（10+）和Firefox（63+）。
• webcomponents.js团队还有一个polyfill：ShadyDOM。

Shadow DOM v1是DOM Living Standard。

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

Answer 2

MDN docs告诉你使用attachShadow而不是......但是这个功能本身被标记为非标准，并且目前完全不受任何浏览器的支持：

在有一个具有良好浏览器支持的标准之前，如果你想使用web组件，最好使用webcomponents.js（充当polyfill）或Polymer（它有自己的API）。

即使webcomponents.js不支持attachShadow，你现在的选择要么：

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

... 或者 ：

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

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