保护 ShadowRoot 元素

Question

我正在开发一个可以向任何网站添加自定义叠加元素的网络扩展。当然，我不希望网站 CSS 和 JavaScript 干扰我的自定义元素，也不想以任何方式影响任何网站的外观，除了我的叠加层。

所以我很自然地转向Shadow DOM。我很快就知道我不能简单地将影子 DOM 附加到 document.body，因为这会取代整个页面。

事实证明，我需要在正文中使用一个常规元素来充当影子根：

    const shadowHost = document.createElement('div');
    document.body.appendChild(shadowHost);
    const shadow = shadowHost.attachShadow({mode: 'closed'});

但是如何保护这个shadow root不受网站css或js的影响呢？

Answer 1

你试过什么？

shadowRoots 不被全局 CSS 设置样式，除非它们是可继承的样式

• https://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/

mode:"closed" 与 CSS 无关，只是没有在 element.shadowRoot 中发布 shadowRoot，因此无法从外部访问 shadow DOM。

当影子根的模式是“关闭”时，影子根的内部实现是 JavaScript 无法访问和不可更改的 - 就像 <video> 元素的内部实现无法从 JavaScript 访问和更改一样.

document.body
  .appendChild(document.createElement('div'))
  .attachShadow({mode:'closed'})
  .innerHTML = `<style>h1{color:green}</style><h1>Hello</h1><h2>Component</h2>`;

<style>
  body {
    /* inheritable styles do style shadowRoots */
    font: 10px Arial;
    color: red;
  }
</style>