Firefox：Polyfill/Shadydom 没有创建阴影根（内部样式仍然影响页面的其余部分）答案

【问题标题】：Firefox: Polyfill/Shadydom not making the shadow root (style inside still affects rest of the page)Firefox：Polyfill/Shadydom 没有创建阴影根（内部样式仍然影响页面的其余部分）
【发布时间】：2017-11-02 13:03:28
【问题描述】：

我正在制作一个 Firefox 插件，我了解到 Firefox 不支持 attachShadow 功能。因此，我正在尝试使用 Shadydom，现在它正在将内容应用到 div，其中应该添加影子根，但它似乎无法正常工作。我里面有一个<style></style>，但是好像影响了页面的其余部分，所以shadow root一定是没有被正确创建吧？

shadydom.min.js 被加载到 manifest.json 文件中。

"content_scripts": [
{
  "matches": ["http://*/*", "https://*/*"],
  "js": ["contentscript.js", "assets/js/shadydom.min.js"],
  "run_at": "document_start"
}

这是我用于创建影子根 dom 的代码。顺便说一句，var shadow 之前已经在代码中定义了。

    var divContainer = document.createElement('div');
    divContainer.setAttribute('id','container');
    divContainer.style.cssText = 'all:initial;';

    document.body.appendChild(divContainer);

    // Create the shadow root
    shadow = document.querySelector('#container')
    .attachShadow({ mode: 'open' });

然后我加载一个 HTML 字符串并像这样添加它 shadow.innerHTML += htmlString

在这个字符串里面有样式和 html 代码，我有链接的全局样式，但它也会影响页面上的所有其他链接，如果它被创建的话，它应该在 shadow dom 之外。

另外，由于 Firefox 还不支持 shadow dom，我实际上无法查看 shadow dom 是否是使用检查器工具创建的。任何人都知道我能做什么？

【问题讨论】：

标签： javascript polymer shady-dom

【解决方案1】：

@JDoe - 你还需要 ShadyCSS 来隔离 CSS - https://github.com/webcomponents/shadycss/

【讨论】：