Light DOM 样式泄漏到 Shadow DOM

Question

我正在尝试创建一个带有浮动小部件的 Chrome 扩展程序。为此，我必须将我的元素与页面的其余部分隔离开来。 Shadow DOM 看起来非常适合这种情况，但它并没有达到我的预期。

这是我的内容脚本：

content.js

var lightDom = document.createElement('style');
lightDom.innerText = 'div { color: red }';

document.body.appendChild(lightDom);

var shadowDom = document.createElement('div');

document.body.appendChild(shadowDom);

var shadowRoot = shadowDom.attachShadow({'mode': 'open'});

shadowRoot.innerHTML = `
    <style>
        div {
            background-color: blue;
        }
    </style>
    <div>Shadow!</div>
`;

shadow DOM 中的 div 应该有黑色文本，但它有红色文本。我是不是做错了什么？

Answer 1

为什么会这样？

Light DOM 中的 CSS 选择器无法到达 shadow DOM 中的元素。但是当 CSS 属性的值为 inherit 时，即默认值 color，shadow DOM 仍然会继承 light DOM 的属性。

From the CSS Scoping specification

3.3.2 继承
影子树的顶级元素继承自它们的宿主元素。 分发列表中的元素从它们最终分发到的内容元素的父级继承，而不是从它们的正常父级继承。

如何预防？

您可以通过使用initial 值来防止继承表单的属性值。

From the CSS Cascading and Inheritance specification

7.3.1。重置属性：初始关键字
如果级联值是初始关键字，则属性的初始值成为其指定值。

每个属性的初始值都记录在定义它的规范中。color 记录在CSS Color specification 中，其初始值为depends on user agent，对于大多数用户代理，这将是black。

您可以将initial 分配给您不想继承其值的每个属性。或者您可以将all 的值设置为initial，如下所示：

.selector 
{
    all: initial;
}

all 属性在与初始关键字相同的规范中定义如下。

3.1.重置所有属性：all 属性
all 属性是一个简写，它重置除方向和 unicode-bidi 之外的所有 CSS 属性。它只接受 CSS 范围的关键字。

“CSS 范围的关键字”在第 3.1.1 节的CSS 3 values specification 中定义，但归结为值initial、inherit 和unset。