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给出了正确的答案：

  

使用mount.style.cssText ='all：initial'代替：host