Comment remplacer les styles dans un élément Shadow-Root ?

Remplacer les styles dans un élément Shadow-Root

Shadow DOM isole les styles dans sa portée, ce qui rend difficile leur modification à l'aide de règles CSS globales . Pour résoudre ce problème, envisagez la solution de contournement suivante :

Injectez le style directement dans la racine de l'ombre :

Créez un nouvel élément de style et définissez son innerHTML sur les modifications de style souhaitées :

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

Ensuite, ajoutez l'élément de style à l'ombre root :

host.shadowRoot.appendChild(style);

Remarque :Cette approche nécessite que le Shadow DOM soit défini en mode « ouvert ».

Amélioration de Chrome 73 et Opera 60 :

Dans les versions récentes de ces navigateurs, un objet CSSStyleSheet peut être instancié et appliqué directement à a Shadow DOM :

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

Attention : N'ajoutez pas plusieurs fois la même feuille de style au tableau adoptéStyleSheets, notamment lors des rechargements de pages SPA.

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!