0

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

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 是否是使用检查器工具创建的。任何人都知道我能做什么？

4

1 回答 1

0

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

于 2018-05-14T14:56:58.180 回答