Comment remplacer les styles dans les éléments Shadow-Root ?

Remplacer les styles dans les éléments Shadow-Root

Le Shadow DOM offre une isolation pour le style, empêchant les règles CSS définies globalement d'affecter les éléments dans l'ombre arbre. Cependant, il peut y avoir des cas où vous devrez remplacer ces styles à portée d'ombre, en particulier dans les situations où l'élément ciblé se trouve dans une bibliothèque tierce que vous ne pouvez pas modifier directement.

Remplacement d'une propriété spécifique

Pour écraser une propriété spécifique définie dans un élément shadow-root, vous pouvez directement injecter un élément de style dans le shadow DOM. Cela implique :

1. Créer un élément de style :

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

2. Définir le innerHTML de l'élément de style avec la règle dominante :

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

3. Ajout de l'élément de style au shadowRoot de l'élément parent :

   host.shadowRoot.appendChild(style);

Mise à jour 2019 pour Chrome 73 et Opera 60

Une meilleure approche, introduite dans Chrome 73 et Opera 60, consiste à créer un objet CSSStyleSheet et à l'associer au shadow DOM ou au document :

1. Création un objet CSSStyleSheet :

   var sheet = new CSSStyleSheet;

2. Modification de l'objet CSSStyleSheet avec la règle de substitution :

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

3. Ajout de la feuille de style aux StyleSheets adoptés tableau du shadow DOM :

   host.shadowRoot.adoptedStyleSheets.push(sheet);

Cette méthode permet des remplacements de style plus efficaces et plus dynamiques. Cependant, il est important de s'assurer que la même feuille de style n'est pas ajoutée plusieurs fois pour éviter un comportement inattendu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!