Shadow DOM stylizacja z zewnątrz

Question

Poszukuję sposobu na stylizację cienia DOM z zewnątrz. Na przykład chciałbym ustawić kolor całego tekstu we wszystkich elementach "span.special" jako CZERWONY. W tym elementy "span.special" z shadow DOM. Jak mogę to zrobić?

Wcześniej było :: cień pseudo-element i /deep/ syntezatora aka >>> do tego celu. Abym mógł napisać coś takiego

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

Ale teraz :: cień, /deep/ i >>> są przestarzałe. Więc, co mamy na ich zastąpienie?

Answer 1

Możesz użyć @import css jak wyjaśniono w tym answer do innego pytania na SO.

Dołącz regułę wewnątrz elementu w stylu w drzewie cieni .

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

---

Zauważ, że >>> combinator nadal jest częścią projektu CSS Scoping modułu.

Answer 2

No @import nie jest rozwiązaniem, jeśli pracujesz z biblioteki komponentów internetowej, że nie można zmienić ...

Wreszcie znalazłem kilka sposobów, aby to zrobić:

1) kaskadowy. Style elementu Shadow DOM również wpływają na elementy Shadow DOM. Nie jest to opcja, jeśli chcesz stylizować konkretny element DOMU Cieni, nie każdy.

2) Właściwości niestandardowe https://www.polymer-project.org/1.0/docs/devguide/styling Jeśli autor elementu WWW pod warunkiem takie.

3) polimeru, mają zwyczaj wstawek także https://www.polymer-project.org/1.0/docs/devguide/styling

4) @import, ale tylko dla części nie-bibliotecznych

Tak, istnieje kilka możliwości, ale wszystkie z nich są ograniczone. Nie ma wystarczająco mocnego sposobu na stylizację zewnętrzną jak: :: shadow.