Wie überschreibe ich Stile in Shadow-Root-Elementen?

Stile in Schatten-Root-Elementen überschreiben

Das Shadow-DOM bietet Isolation für das Styling und verhindert, dass global definierte CSS-Regeln Elemente innerhalb des Schattens beeinflussen Baum. Es kann jedoch Fälle geben, in denen Sie diese Stile mit Schattenbereich überschreiben müssen, insbesondere in Situationen, in denen sich das Zielelement in einer Bibliothek eines Drittanbieters befindet, die Sie nicht direkt ändern können.

Überschreiben einer bestimmten Eigenschaft

Um eine bestimmte Eigenschaft zu überschreiben, die in einem Schattenstammelement definiert ist, können Sie ein Stilelement direkt in das Schatten-DOM einfügen. Dies beinhaltet:

1. Erstellen eines Stilelements:

   var style = document.createElement('style');

2. Festlegen des innerHTML des Stilelements mit der übergeordneten Regel:

   style.innerHTML = '.the-class-name { property-name: my-value; }';

3. Anhängen des Style-Elements an den ShadowRoot des übergeordneten Elements:

   host.shadowRoot.appendChild(style);

2019 Update für Chrome 73 und Opera 60

Ein besserer Ansatz, der in Chrome 73 und Opera 60 eingeführt wurde, besteht darin, ein CSSStyleSheet-Objekt zu erstellen und es mit dem Schatten-DOM oder Dokument zu verknüpfen:

1. Erstellen ein CSSStyleSheet-Objekt:

   var sheet = new CSSStyleSheet;

2. Ändern des CSSStyleSheet-Objekts mit der Override-Regel:

   sheet.replaceSync('.color { color: pink }');

3. Hinzufügen des Stylesheets zu den adoptiertenStyleSheets Array des Schatten-DOM:

   host.shadowRoot.adoptedStyleSheets.push(sheet);

Diese Methode ermöglicht effizientere und dynamischere Stilüberschreibungen. Es ist jedoch wichtig sicherzustellen, dass das gleiche Stylesheet nicht mehrmals hinzugefügt wird, um unerwartetes Verhalten zu vermeiden.

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