Override styles in a shadow-root element

by

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 ]

More Related Contents:

  1. How to get element in user-agent shadow root with JavaScript?
  2. Is it possible to access Shadow DOM elements through the parent document?
  3. Nested element (web component) can’t get its template
  4. How to let imported css font / icons have effects on elements in the shadow dom?
  5. Polymer share styles across elements
  6. 5 stars and the golden 5 stars are not together (When browsing with Internet explorer)
  7. How to hide css and js version details from weppalyzer in PHP
  8. How to make page loaders/animations/transitions
  9. toggle show/hide div with button?
  10. Textarea Auto height [duplicate]
  11. Dynamically loading css stylesheet doesn’t work on IE
  12. How to set background color of HTML element using css properties in JavaScript
  13. How to draw polygons on an HTML5 canvas?
  14. Convert TD columns into TR rows
  15. show loading icon until the page is load?
  16. How to use square cursor in a HTML input field?
  17. webkit-transform overwrites z-index ordering in Chrome 13
  18. Adding a new line in a JSX string inside a paragraph – React
  19. Custom Element getRootNode.closest() function crossing multiple (parent) shadowDOM boundaries
  20. how to remove css property using javascript?
  21. TypeError: $(…).modal is not a function with bootstrap Modal
  22. jsPDF can’t get any styling to work
  23. Adding Google Translate to a web site
  24. How to get border width in jQuery/javascript
  25. Include CSS,javascript file in Yii Framework
  26. How to do page numbering in header/footer htmls with wkhtmltopdf?
  27. Reading non-inline CSS style info from Javascript
  28. HTML5 Video duration without playing video
  29. How to get element by class name
  30. Combination of animation and transition not working properly

Leave a Comment