Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Override styles in a shadow-root element

Is there a way to change styles found in a shadow element? Specifically, extend/overwrite some properties found in a css class? I am using a chrome-extension called Beanote which hasn't been updated since April(2017) and there's a pesky bug I'd like to fix. I found that one line of css patches it up enough for me, but I am at a loss at applying it without going inside of the shadow element itself and directly editing those styles in the dev tools.

I'm looking for a way for this:

/*global css rule*/ .the-class-name { property-name: my-value; } 

to overwrite this:

/* style tag inside the shadow-root */ .the-class-name { property-name: bad-value; } 


Most of the resources I've found online with queries involving shadow-root override style or edit shadow-root styling had something to do with :host which, if its meant for this, doesn't work for my needs or deprecated functionality like ::shadow.

like image 482
Andrew Avatar asked Dec 04 '17 00:12

Andrew


People also ask

How do you handle shadow DOM elements?

Work with Shadow DOM elements using RemoteWebDriver To access these Shadow DOM elements, we need to use the JavascriptExecutor executeScript() function. If you look at the DOM structure, every element that includes Shadow DOM also has a shadowRoot property that describes the underlying elements.

How do I override a CSS file?

To override the CSS properties of a class using another class, we can use the ! important directive. In CSS, ! important means “this is important”, and the property:value pair that has this directive is always applied even if the other element has higher specificity.

What selector works for shadow DOM elements?

The :host selector allows to select the shadow host (the element containing the shadow tree).


2 Answers

Because of the isolation of styles, which is a feature of Shadow DOM, you cannot define a global CSS rule that will be applied in the Shadow DOM scope.

It could be possible with CSS variables but they should be implemented explicitly in the shadowed component (which is not the case with this 3rd party library).

A workaround is to inject the line of style in the shadow DOM directly.

//host is the element that holds the shadow root: var style = document.createElement( 'style' ) style.innerHTML = '.the-class-name { property-name: my-value; }' host.shadowRoot.appendChild( style ) 

NB: it will work only if the Shadow DOM mode is set to 'open'.


2019 update for Chrome 73+ and Opera 60+

Now it is possible to instantiate a CSSStyleSheet object directly and to affect it to a Shadow DOM or a document:

var sheet = new CSSStyleSheet sheet.replaceSync( `.color { color: pink }`) host.shadowRoot.adoptedStyleSheets = [ sheet ]  
like image 88
Supersharp Avatar answered Sep 22 '22 08:09

Supersharp


Ionic V4 select down icon color change example

document.querySelector('#my-select').shadowRoot.querySelector('.select-icon-inner').setAttribute('style', 'opacity:1');   ionViewDidEnter() {     document.querySelector('#my-select').shadowRoot.querySelector('.select-icon-inner').setAttribute('style', 'opacity:1');   } 

If you want overwrite the default generated shadowRoot style then have to call js function after page loaded fully.

like image 44
riguang zheng Avatar answered Sep 21 '22 08:09

riguang zheng