Wie kann ich Stile in einem Shadow-Root-Element überschreiben?

Stile in einem Shadow-Root-Element überschreiben

Eines der Hauptmerkmale von Shadow DOM ist die Isolierung von Stilen. Dadurch wird verhindert, dass externe CSS-Regeln Elemente innerhalb eines Schattenstamms beeinflussen, wodurch Kapselung und Modularität gewährleistet werden. Es stellt jedoch auch eine Herausforderung dar, wenn Sie im Schattenstamm definierte Stile überschreiben müssen.

Das Problem

Gemäß Ihrer Abfrage versuchen Sie, a zu überschreiben CSS-Eigenschaft, die innerhalb eines Schattenstammelements definiert ist, insbesondere in einer Klasse namens .the-class-name. Sie konnten dies jedoch nicht erreichen, ohne die Stile des Schattenstamms direkt in den Entwicklungstools zu manipulieren.

Das Problem

Herkömmliche Methoden zum Überschreiben von CSS-Regeln, wie z Wenn Sie globale CSS-Regeln oder :host-Selektoren verwenden, funktionieren Sie aufgrund ihrer Isolation nicht mit Elementen, die im Schatten verwurzelt sind. Shadow DOM verhindert, dass globale CSS-Regeln in seinen Bereich eindringen, und :host-Selektoren gelten nur für Elemente, die den Schattenstamm hosten, nicht für die Elemente innerhalb des Schattenstamms.

Die Lösung

Glücklicherweise gibt es eine Problemumgehung, mit der Sie neue Stile direkt in einen Schattenstamm einfügen können:

var host = document.querySelector('host-element'); // The element that holds the shadow root
var style = document.createElement('style');
style.innerHTML = '.the-class-name { property-name: my-value; }';
host.shadowRoot.appendChild(style);

Dieser Code dynamisch erstellt einen neuen Element mit der gewünschten CSS-Regel und hängt es an das Schattenstammverzeichnis des Hostelements an. Auf diese Weise wird die neue Stilregel im Schattenstamm angewendet und überschreibt die bestehende Regel.

Hinweis: Diese Problemumgehung funktioniert nur, wenn der Schatten-DOM-Modus auf „Öffnen“ eingestellt ist.

Update (für Chrome 73 und Opera 60)

Mit der Veröffentlichung von Chrome 73 und Opera 60 ist eine neue Technik zum Überschreiben von Stilen in Schattenwurzeln verfügbar:

var sheet = new CSSStyleSheet;
sheet.replaceSync('.color { color: pink }');
host.shadowRoot.adoptedStyleSheets.push(sheet);

Diese Methode beinhaltet das Erstellen eines CSSStyleSheet-Objekts und das Hinzufügen dieses zum adoptiertenStyleSheets-Array der Schattenwurzel. Das neue Stylesheet kann dann verwendet werden, um vorhandene Stile zu überschreiben.

Das obige ist der detaillierte Inhalt vonWie kann ich Stile in einem Shadow-Root-Element überschreiben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!