Share style across web components “of the same type”

by

Does it have any performance implications…?

Yes, it depends on how many instances, and on the CSS engine implemented in the browser. You’ll have to test every use case and take in account speed versus memory consumption.

Is there a way to share the style node across multiple instances of the same web component?

Yes, you can use @import url like in this SO question. Or you can choose to not use Shadow DOM and use global CSS style only.

2019 update

As Harshal Patil suggested, since Chrome 73 and Opera 60 it is possible for multiple Shadow DOM to adopt the same stylesheet. This way an update in the stylesheet will be applied to all the web components.

let css = new CSSStyleSheet
css.replaceSync( `div { color: red }` )

customElements.define( 'web-comp', class extends HTMLElement {
    constructor() {
        super()
        let shadow = this.attachShadow( { mode: 'open' } )
        shadow.innerHTML = `<div><slot></slot></div>`
        shadow.adoptedStyleSheets = [ css ]
    }
} )
color.oninput = () => css.replaceSync( `div { color: ${color.value} }` )
<web-comp>Hello</web-comp>
<web-comp>World</web-comp>
<input value=red id=color>

More Related Contents:

  1. Nested element (web component) can’t get its template
  2. What is the ::content/::slotted pseudo-element and how does it work?
  3. How to get element in user-agent shadow root with JavaScript?
  4. Is it possible to access Shadow DOM elements through the parent document?
  5. How to let imported css font / icons have effects on elements in the shadow dom?
  6. Is it possible to always show up/down arrows for input “number”?
  7. Use of Template with HTML Custom Elements
  8. Bad: [html] in html code i can’t make two form input in one row [closed]
  9. How to overlay one div over another div
  10. What is the boundary in multipart/form-data?
  11. Trouble with content security policy
  12. html5 – canvas element – Multiple layers
  13. vs.
  14. What is “X-Content-Type-Options=nosniff”?
  15. Autocomplete off vs false?
  16. How to make a whole ‘div’ clickable in html and css without JavaScript? [duplicate]
  17. Can a span be closed using ?
  18. Stop CSS transition from firing on page load
  19. Form and file upload with htmlService and app script not working
  20. restrict file upload selection to specific types
  21. Chrome getUserMedia Not Requesting Permission Locally
  22. What is the correct readonly attribute syntax for input text elements?
  23. How can I resize an image to a percentage of itself with CSS?
  24. HTML/CSS: Make a div “invisible” to clicks?
  25. Node.js – How to send data from html to express
  26. Failed to Load Resource, Plugin Handled Load on iOS
  27. How to set thymeleaf th:field value from other variable
  28. Can Outlook 2010 use a web font in an html email?
  29. CSS Vertically & Horizontally Center Div [duplicate]
  30. Does svg xmlns attribute value requires protocol? Can it be https or relative?

Leave a Comment