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

MDN docs tell to you to use attachShadow 而不是...但是该功能本身被标记为非标准并且目前完全不受任何浏览器支持：

除非有一个具有良好浏览器支持的标准，否则如果您想使用 Web 组件，最好使用 webcomponents.js (which acts as a polyfill) or Polymer（它有自己的 API）。

即使 webcomponents.js 也不支持 attachShadow，您目前的选择是：

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

... 或至：

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

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

Answer 2

现在您可以使用 attachShadow() 代替 createShadowRoot():

在Chrome（53+）、Opera（40+）、Safari（10+）、Firefox（63+）中是implemented natively ).
还有一个polyfill by the webcomponents.js team: ShadyDOM。

Shadow DOM v1 是 DOM Living Standard.

Edge 将很快采用 Chromium 引擎，然后它将与 Shadow DOM v1 兼容。

Element.createShadowRoot() 的替代方案是什么？

What is the alternative for Element.createShadowRoot()?

javascript

css

web-component

shadow-dom