2016-01-09 11 views
6

Lassen Sie uns sagen, dass wir einige CSS-Code für so etwas wie eine animierte CSS loader hatte, die wir in allen unseren Web-Komponenten verwenden möchten, die Verwendung des Shadow DOM machen. Wie können wir diesen CSS-Code wiederverwenden, wenn wir das Shadow-DOM nicht wie bei ::shadow und durchstechen können?Schatten-Piercing Nachkomme combinator, '/ deep /', darunter ':: shadow' Pseudo-Elemente, ist veraltet ist, so wie wir den Schatten DOM durchdringen?

Wir können nicht einmal eine <link /> innerhalb des Schatten-DOM hinzufügen, so bin ich derzeit gezwungen, den Code über mehrere <style> Tags zu duplizieren.

Ich würde wirklich gerne wissen, was die vorgeschlagenen Best Practices für diese Art von Anwendungsfall sind.

Vielen Dank.

Antwort

4

Anstatt mit <link />, würde ich Ihnen vorschlagen, css @imports innerhalb Schatten root verwenden externe Stylesheets zu laden, wo immer nötig.
Ich habe eine Antwort here zum Thema geschrieben. Zitieren Sie es unten als Referenz.

Sie können eine style.css erstellen und in Ihre Komponenten importieren, indem Sie einen css @ import in Ihre Vorlage einfügen. Es wird nicht über mehrere Netzwerkanrufe, seit Browser es, wenn Sie Ihre ersten Bauteilbelastungen und für nachfolgende Komponenten zwischenzuspeichern wird es aus dem Cache aufgenommen werden.

+0

Eine solche einfache Lösung nicht sicher, warum ich nicht daran denken war. Vielen Dank. –

+0

Könnten Sie vielleicht ein Beispiel von dem, was Sie meinen, veröffentlichen? – superluminary