Question

我正在制作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代码，我有链接的全局样式，但它也影响页面上的所有其他链接，如果它被创建，它应该在阴影dom之外。

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

Answer 1

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

Firefox：Polyfill / Shadydom没有制作阴影根（内部样式仍会影响页面的其余部分）

1 个答案: