How to Override Styles in Shadow-Root Elements?

Overriding Styles in Shadow-Root Elements

The Shadow DOM offers isolation for styling, preventing globally defined CSS rules from affecting elements within the shadow tree. However, there may be instances where you need to override these shadow-scoped styles, specifically in situations where the targeted element is within a third-party library that you cannot directly modify.

Overriding a Specific Property

To overwrite a specific property defined within a shadow-root element, you can directly inject a style element into the shadow DOM. This involves:

1. Creating a style element:

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

2. Setting the innerHTML of the style element with the overriding rule:

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

3. Appending the style element to the shadowRoot of the parent element:

   host.shadowRoot.appendChild(style);

2019 Update for Chrome 73 and Opera 60

A better approach, introduced in Chrome 73 and Opera 60 , is to create a CSSStyleSheet object and associate it with the shadow DOM or document:

1. Creating a CSSStyleSheet object:

   var sheet = new CSSStyleSheet;

2. Modifying the CSSStyleSheet object with the override rule:

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

3. Adding the style sheet to the adoptedStyleSheets array of the shadow DOM:

   host.shadowRoot.adoptedStyleSheets.push(sheet);

This method allows for more efficient and dynamic style overrides. However, it's important to ensure that the same style sheet is not added multiple times to avoid unexpected behavior.

The above is the detailed content of How to Override Styles in Shadow-Root Elements?. For more information, please follow other related articles on the PHP Chinese website!