Shadow DOM 样式封装答案

【问题标题】：Shadow DOM styles encapsulationShadow DOM 样式封装
【发布时间】：2018-11-15 13:08:03
【问题描述】：

我想创建一个 Chrome 扩展程序，它将一个小部件注入网页。

在任何页面上注入时，我的小部件必须具有一致的样式。 Afaik，实现这一点的最佳方法是使用 Shadow DOM。

Shadow DOM 样式似乎从设计上继承自父页面样式。必须为宿主元素使用all:initial CSS 属性，以防止父页面的样式泄漏到影子 DOM 样式中。

所以，我有一个示例代码：

(function addWidget() {
  let rootEl = document.querySelector('body');
  let mount = document.createElement('div');
  rootEl.appendChild(mount);
  let shadowRoot = mount.attachShadow({mode: 'open'});
  shadowRoot.innerHTML = `
<style>
:host {
all: initial;
}

div {
position: fixed;
z-index: 2147483647;
border: 1px solid black;
padding: 30px;
font-size: 30px;
background: tomato;
top: 10px;
right: 10px;
}
</style>

  <div>Shadow DOM</div>
  `;
}());

如果您打开 Chrome 的开发工具并在控制台中执行此代码，它将在大多数网站上按预期工作。但在某些网站（如 reddit.com）上，样式仍然继承自父页面。

为了确保小部件的样式在所有网页中保持一致，我必须进行哪些更改。

【问题讨论】：

使用 mount.style.cssText='all:initial' 代替 :host
哇，非常感谢！
@EugeneKarataev wOxxOm 在统计上不太可能将他的评论变成答案，请您为此写一个自我答案吗？
@Xan，当然，完成。
@Tom 这基本上是一样的，但更高的 CSS 特异性。我们可以使用 :host {all: initial !important} 更高，甚至更高级 mount.style.cssText='all:initial !important'

标签： css google-chrome-extension shadow-dom

【解决方案1】：

wOxxOm 给出了正确答案：

使用 mount.style.cssText='all:initial' 而不是 :host

【讨论】：