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

【问题标题】：What is the alternative for Element.createShadowRoot()?Element.createShadowRoot() 的替代方法是什么？
【发布时间】：2016-04-01 09:51:09
【问题描述】：

我正在使用这段代码：

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。

如何解决这个问题？有什么替代方案？

【问题讨论】：

来自mdn：This method has been deprecated in favor of attachShadow.，这个问题会有所帮助：stackoverflow.com/questions/34452028/…

标签： javascript css web-component shadow-dom

【解决方案1】：

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

在 Chrome (53+)、Opera (40+)、Safari (10+) 和 Firefox (63+) 中原生为 implemented。
还有一个 polyfill 来自 webcomponents.js 团队：ShadyDOM。

Shadow DOM v1 是 DOM Living Standard。

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

【讨论】：

【解决方案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。

【讨论】：