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

Question

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

<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 容量）中是正确的。

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

同题，看这个。

Answer 2

试试下面的代码：

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

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

Must I append style element to all ShadowDOM?

javascript

shadow-dom