Shadow DOM从外部造型 [英] Shadow DOM styling from the outside

问题描述

我正在寻找从外部设置阴影DOM样式的方法。例如，我想将所有'span.special'元素中的所有文本的颜色设置为RED。包括来自shadow DOM的'span.special'元素。我怎么能这样做？

I am searching a way to styling shadow DOM from the outside. For example, I would like to set the color of all text in all 'span.special' elements as RED. Including 'span.special' elements from shadow DOM. How I can do this?

以前有 :: shadow 伪元素和 / deep / 组合器又名>>> 为此目的。所以我可以写类似

Previously there were ::shadow pseudo-element and /deep/ combinator aka >>> for this purpose. So I could write something like

span.special, *::shadow span.special {
    color: red
}

但现在 :: shadow ， /深度/ 和>>> 已弃用。那么，我们有什么可以替代它们呢？

But now ::shadow, /deep/ and >>> are deprecated. So, what do we have as a replacement of them?

推荐答案

您可以按照回答关于SO的另一个问题。

You could use @import css as explained in this answer to another question on SO.

在中的 style 元素中包含规则影子树。

Include the rule inside the style element in the shadow tree.

 <style>
   @import url( '/css/external-styles.css' )
 </style>

---

请注意 >>> 组合器仍然是CSS范围模块草案的一部分。

---

Note that the >>> combinator is still part of the CSS Scoping Module Draft.

这篇关于Shadow DOM从外部造型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！