Shadow DOM Styling von außen

Question

Ich suche einen Weg zum Shadow DOM von außen. Zum Beispiel möchte ich die Farbe des gesamten Textes in allen 'span.special' Elementen als ROT setzen. Einschließlich 'span.special' Elemente aus Shadow DOM. Wie kann ich das machen?

Bisher gab es :: shadow Pseudoelement und /deep/ combinator aka >>> für diesen Zweck. So konnte ich so etwas wie

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

schreiben Aber jetzt :: Schatten, /deep/ und >>> sind veraltet. Also, was haben wir als Ersatz für sie?

Answer 1

Sie könnten @import css wie in dieser answer zu einer anderen Frage auf SO erläutert verwenden.

Fügen Sie die Regel im Inneren des Stil Element im Schatten Baum.

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

---

Beachten Sie, dass die >>> combinator noch Teil des CSS Scoping-Modul Draft ist.

Answer 2

Nun, ist @import keine Lösung, wenn Sie mit Bibliothek Web-Komponente arbeiten, die Sie nicht ändern können ...

Schließlich fand ich mehrere Möglichkeiten, es zu tun:

1) Cascading. Stile des Shadow-DOM-Hostelements wirken sich auch auf Shadow-DOM-Elemente aus. Keine Option, wenn Sie ein bestimmtes Element des Shadow-DOM stylen müssen, nicht alle.

2) Benutzerdefinierte Eigenschaften https://www.polymer-project.org/1.0/docs/devguide/styling Wenn ein Autor der Web-Komponente wie z.

3) Polymer, das auch https://www.polymer-project.org/1.0/docs/devguide/styling

4) @import Individuelle Mixins haben, aber nur für nicht-Bibliothekskomponenten

So gibt es mehrere Möglichkeiten, aber alle von ihnen sind begrenzt. Kein kraftvoller Weg nach draußen, Styling wie :: Shadow waren.