Override styles in shadow-root element

Question

Is there a way to change the styles found in the shadow element? In particular, to expand / rewrite some properties found in the CSS class ? I am using a Chrome extension called Beanote, which has not been updated since April (2017), and there is an unpleasant error that I would like to fix. I found that one line of CSS fixes this enough for me, but I find it difficult to apply it without going inside the shadow element itself and directly editing these styles in the development tools.

I am looking for a way to do this:

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

rewrite this:

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

Most of the resources that I found on the Internet with queries that include shadow-root override styleor edit shadow-root styling shadow-root override style edit shadow-root stylinghad something to do with :hostwhich, if it is intended for this, do not work for my needs or outdated functions such as ::shadow.

Answer 1

Because of the style isolation, which is a function of the Shadow DOM, you cannot define a global CSS rule to apply in the Shadow DOM scope.

This may be possible with CSS variables, but they must be explicitly implemented in the shaded component (which is not the case with this third-party library).

The workaround is to embed the style line directly into the shadow DOM.

//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: this will only work if the Shadow DOM is modeset to 'open'.

---

2019 Chrome 73+ Opera 60+

CSSStyleSheet Shadow DOM :

var sheet = new CSSStyleSheet
sheet.replaceSync( '.color { color: pink }')
host.shadowRoot.adoptedStyleSheets = [ sheet ] 

Answer 2

Ionic V4

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');
  }

shadowRoot, js .

Answer 3

.

, Shadow DOM, .. , . : https://developers.google.com/web/fundamentals/web-components/shadowdom#stylefromoutside

, DOM styleSheet, adoptedStyleSheets.

, , addRule insertRule. , adopedStyleSheets.

, . , shadowRoot styleSheet, adoptedStyleSheets , styleSheetList , .

assert(myElement.shadowRoot.styleSheets.length != 0);
myElement.shadowRoot.styleSheets[0].addRule(':host', 'display: none;');

assert(myElement.shadowRoot.adoptedStyleSheets.length != 0);
'myElement.shadowRoot.adoptedStyleSheets[0].addRule(':host', 'display: none;');'

const sheet = new CSSStyleSheet();
sheet.replaceSync(':host { display: none; }');

const elemStyleSheets = myElement.shadowRoot.adoptedStyleSheets;

// Append your style to the existing style sheet.
myElement.shadowRoot.adoptedStyleSheets = [...elemStyleSheets, sheet];

// Or if just overwriting a style set in the embedded 'styleSheet'
myElement.shadowRoot.adoptedStyleSheets = [sheet];

Answer 4

, @Renato , , IMHO, - -.

@Supersharp , CSS Shadow Root, .

CSS - , , , , WebComponent .

:host ( @Renato), IMHO, , API:

• (:host 's) CSS-
• :host children, Shadow DOM, CSS- :host, -

, , , CSS, open .

, , :

• :host
• WebComponent , :host

, , CSS :host.