javascript - 我必须将样式元素附加到所有 ShadowDOM 吗？

Question

外部 ShadowDOM 和内部 ShadowDOM 之间的 CSS 空间是分开的。

<style>
    .foo a.bar { text-decoration: none; color: skyblue; }
</style>
<div class="foo">
    <a id="a1" class="bar">baz</a>
    <custom-element>
        (shadow)
            <a id="a2" class="bar">baz</a>
        (/shadow)
    </custom-element>
    <custom-element>
        (shadow)
            <a id="a3" class="bar">baz</a>
        (/shadow)
    </custom-element>
</div>

在上面的代码中，#a1应用了样式，但是#a2和#a3不是。所以，我总是为每个 ShadowDOM 添加样式元素。样式元素内容相同。

我觉得元素多了对性能不好。如果可能，我想通过一个元素设置 CustomElement 的默认样式。

Answer 1

CSS space between outer ShadowDOM and inner ShadowDOM is separated.

是的!这是 Shadow DOM 的主要和有趣的特性之一。

So, I always append style element for each ShadowDOM. The content of style elements is same. I think that it is not good for performance when there are many elements.

您可能仅从 1000 个自定义元素(并且取决于 CPU 容量)中是正确的。

如果您需要应用数千次相同的样式，也许您应该考虑使用没有 Shadow DOM 的自定义元素。

同题，看这个other SO question .