Shadow DOM стиль снаружи

Question

Я ищу способ укладки теней DOM со стороны. Например, я хотел бы установить цвет всего текста во всех элементах span.special как RED. Включая элементы span.special из теневого DOM. Как я могу это сделать?

Ранее были :: тень псевдо-элемент и /глубоко/ комбинатор ака >>> для этой цели. Так что я мог бы написать что-то вроде

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

Но теперь :: тень, /глубоко/ и >>> устарели. Итак, что у нас есть в качестве замены?

Answer 1

Вы можете использовать @import css, как объяснено в этом answer, другому вопросу о SO.

Включить правило внутри стиль элемент в теневое дерево.

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

---

Обратите внимание, что >>> combinator все еще является частью проекта Scoping модуля CSS.

Answer 2

Ну, @import не является решением, если вы работаете с библиотекой веб-компонент, который вы не можете изменить ...

Наконец я нашел несколько способов сделать это:

1) каскадного. Элементы хоста Shadow DOM также влияют на элементы DOM DOM. Не вариант, если вам нужно стилизовать определенный элемент Shadow DOM, а не каждый.

2) Пользовательские свойства https://www.polymer-project.org/1.0/docs/devguide/styling Если автор веб-компонента предоставил такие.

3) В полимере есть пользовательские Примеси также https://www.polymer-project.org/1.0/docs/devguide/styling

4) @import, но только не-библиотека компонентов

Итак, есть несколько вариантов, но все они ограничены. Не было достаточно мощного способа внешнего стиля: :: shadow.