Light DOM 样式泄漏到 Shadow DOM

Question

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

这是我的内容脚本：

内容.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 的值。

来自 CSS 范围规范

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

如何防止它发生？

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

来自 CSS Cascading and Inheritance 规范

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

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

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

.selector 
{
    all: initial;
}

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

3.1. 重置所有属性：所有属性
all 属性是一种速记，用于重置除方向和 unicode-bidi 之外的所有 CSS 属性。 它只接受 CSS 范围内的关键字。

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