Light DOM 样式泄漏到 Shadow DOM [英] Light DOM style leaking into Shadow DOM

问题描述

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

I am trying to create a Chrome extension with a floating widget. To do that, I have to isolate my element from the rest of the page. Shadow DOM looks like a perfect fit for that, but it isn't doing what I expected.

这是我的内容脚本:

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 应该有黑色文本，但它有红色文本.我做错了什么吗?

The div inside the shadow DOM should have black text, but it has red text instead. Am I doing something wrong?

推荐答案

为什么会这样?

Light DOM 中的 CSS 选择器无法访问 shadow DOM 中的元素.但是当一个 CSS 属性的值为 inherit 时，这是 color 的默认值，shadow DOM 仍然会继承 light DOM 的值.

Why is this happening?

CSS selectors in Light DOM are prevented from reaching elements inside shadow DOM. But when a CSS property has the value inherit, which is the default value of color, the shadow DOM will still inherit those from the light DOM.

来自 CSS 范围规范

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

3.3.2 Inheritance
The top-level elements of a shadow tree inherit from their host element. The elements in a distribution list inherit from the parent of the content element they are ultimately distributed to, rather than from their normal parent.

如何防止它发生?

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

How to prevent it from happening?

You can prevent the values of properties form being inherited by using the initial value.

来自 CSS 级联和继承规范

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

7.3.1. Resetting a Property: the initial keyword
If the cascaded value is the initial keyword, the property’s initial value becomes its specified value.

每个属性的初始值都记录在定义它的规范中.color 记录在 CSS 颜色规范，它的初始值是取决于用户代理，对于大多数用户代理来说，这将是black.

The initial value of each property is documented in the specification it is defined in. color is documented in the CSS Color specification and its initial value is depends on user agent, for most user agents this will be black.

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

You can assign initial to each property you don't want to inherit its value. Or you can set the value of all to initial, like so:

.selector 
{
    all: initial;
}

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

The all property is defined as follows in the same spec as the initial keyword.

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

3.1. Resetting All Properties: the all property
The all property is a shorthand that resets all CSS properties except direction and unicode-bidi. It only accepts the CSS-wide keywords.

CSS 范围的关键字"在 3.1 部分的 CSS 3 值规范中定义.1，但归结为值 initial、inherit 和 unset.

"CSS-wide keywords" is defined in CSS 3 values specification in section 3.1.1, but comes down to the values initial, inherit and unset.

这篇关于Light DOM 样式泄漏到 Shadow DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！