我必须将样式元素追加到所有ShadowDOM吗？ [英] Must I append style element to all ShadowDOM?

问题描述

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

CSS space between outer ShadowDOM and inner ShadowDOM is separated.

<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添加样式元素。
样式元素的内容是相同的。

In above code, #a1 is applied style, but #a2 and #a3 are not. So, I always append style element for each ShadowDOM. The content of style elements is same.

我认为当有很多元素时，它对性能不利。
我想尽可能将CustomElement的默认样式设置为一个元素。

I think that it is not good for performance when there are many elements. I want to set default style of a CustomElement by one element if possible.

推荐答案

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

CSS space between outer ShadowDOM and inner ShadowDOM is separated.

是的！它是Shadow DOM的主要和有趣的特色之一。

Yes ! it's one of the main and interesting featues od Shadow DOM.

因此，我总是为每个ShadowDOM追加样式元素。样式元素的内容是相同的。
我认为当有很多元素时，它对性能不利。

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容量）。

You're probably right only from 1000's of custom elements (and depending on the CPU capacity).

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

If you need to apply thousands of times the same style, maybe you should consider using Custom Elements without Shadow DOM.

关于同一主题，请查看此其他SO问题 。

On the same subject, look at this other SO question.

这篇关于我必须将样式元素追加到所有ShadowDOM吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！