Wie überschreibe ich Stile in einem Shadow-Root-Element?

Stile in einem Shadow-Root-Element überschreiben

Shadow DOM isoliert Stile innerhalb seines Geltungsbereichs, was es schwierig macht, sie mithilfe globaler CSS-Regeln zu ändern . Um dieses Problem zu beheben, ziehen Sie die folgende Problemumgehung in Betracht:

Stil direkt in Shadow Root einfügen:

Erstellen Sie ein neues Stilelement und stellen Sie dessen innerHTML auf die gewünschten Stiländerungen ein:

var style = document.createElement('style');
style.innerHTML = '.the-class-name { property-name: my-value; }';

Als nächstes fügen Sie das Stilelement an den Schatten an root:

host.shadowRoot.appendChild(style);

Hinweis: Dieser Ansatz erfordert, dass das Shadow DOM in den „offenen“ Modus gesetzt wird.

Chrome 73 und Opera 60-Verbesserung:

In neueren Versionen dieser Browser kann ein CSSStyleSheet-Objekt instanziiert und direkt auf ein Objekt angewendet werden Shadow DOM:

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

Achtung: Fügen Sie nicht dasselbe Stylesheet mehrmals zum adoptiertenStyleSheets-Array hinzu, insbesondere beim Neuladen der SPA-Seite.

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