阴影 Dom 继承父页面 CSS [Chrome]

Question

我读过的所有内容都表明影子 Dom 应该是来自其父页面 CSS 的 'safe'。 IE。如果我将所有 div 样式设置为紫色字体：

<style>
  div{color: purple}
</style>

我的 Shadow Dom 中的 div 应该具有浏览器默认颜色。

我正在编写一个 chrome 扩展程序，可以将 html 注入任何给定页面。除非此 html 受 Shadow Dom 或 Iframe 保护，否则它将继承页面的所有 CSS.

在此 question 中解决此问题的建议是使用 Shadow Dom。所以我实施了一个解决方案，但注意到它仍然继承了页面的 CSS。我认为这可能是在 Chrome 扩展中使用它的一个问题，所以我从一些 Shadow Dom 示例中劫持了一个 jsBin（并将其放入另一个实时编码应用程序中以备不时之需）。

https://codepen.io/hyrumwhite/pen/xPRexQ

同样的结果。我的阴影 DOM 继承了页面 CSS，我的 div（奇怪的是我的 h1）是紫色的。

阴影中的子项 Dom 似乎将继承应用到宿主元素的任何样式。

这是按设计工作的吗？有没有办法防止这种情况？还是阴影 DOM 足够新以至于这是一个错误，我应该在继续使用它时遇到类似的错误？

Answer 1

继承的属性将照常继承。最好把shadow boundary看作是影响级联的，即选择器的范围和规则的重要性。

要从页面中隔离阴影内容，请考虑 the all property。

document.getElementById("example_control").attachShadow({mode:'open'}).innerHTML=`
  <h1>shadow dom header</h1>
  <div>shadow dom div</div>`;
document.getElementById("example_initial").attachShadow({mode:'open'}).innerHTML=`
  <style>*{all:initial}</style>
  <h1>shadow dom header</h1>
  <div>shadow dom div</div>`;
document.getElementById("example_unset").attachShadow({mode:'open'}).innerHTML=`
  <style>*{all:unset}</style>
  <h1>shadow dom header</h1>
  <div>shadow dom div</div>`;

div{color:purple}
div{border:1px solid}

<p>control:
<div id=example_control></div>

<p>initial:
<div id=example_initial></div>

<p>unset
<div id=example_unset></div>

Answer 2

对我来说，添加 :host { all: initial } 作为 ShadowDOM 样式中的第一个 CSS 规则可以防止继承，而不会影响 ShadowDOM 中定义的其他 CSS。

事实证明，使用 * { all: initial } 过于宽泛，覆盖了我在 ShadowDOM 中定义的大部分 CSS。

参考：WebFundamentals 项目 ShadowDOM 文档中标记为#reset 的部分。

阴影 Dom 继承父页面 CSS [Chrome]

Shadow Dom inheriting parent page CSS [Chrome]

javascript

google-chrome

google-chrome-extension

shadow-dom