Shadow DOM 样式封装

Question

我想创建一个 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），样式仍然继承自父页面。

我必须进行哪些更改才能确保小部件的样式在所有网页上保持一致。

Answer 1

wOxxOm 给出了正确答案：

Use mount.style.cssText='all:initial' instead of :host

Shadow DOM 样式封装

Shadow DOM styles encapsulation

css

google-chrome-extension

shadow-dom