Re: [WICG/webcomponents] "open-stylable" Shadow Roots (#909)

A lot of people here really want this feature, and even some people here say they avoid using Custom Elements (which some people call Web Components 😊) because of this issue.

But in all my years of using web components, I've never found this to reallybe a show stopper:

```js
class MyEl extends HTMLElement {
  // ...
  connectedCallback() {
    const style = document.head.querySelector('#shared-stylesheet')
    this.shadowRoot.append(style.cloneNode())
  }
}
```

And done! In practice, any performance implication is usually meaningless. If you you're doing this to thousands of elements in, say, a table, you can cache a single constructible stylesheet even if the original was not constructible:

```js
// This `sharedSheet` feature to abstract into an re-usable class or function.
let sharedSheet = null

class MyTableRow extends HTMLElement {
  // ...
  connectedCallback() {
    if (!sharedSheet) {
      const style = document.head.querySelector('#shared-stylesheet')
      const sharedSheet = new StyleSheet()
      sharedSheet.replace(style.textContent)
    }
    this.shadowRoot.adoptedStyleSheets = [sharedSheet]
  }
}
```


Done!!! 5 minutes! Really no need to avoid custom elements just because of this.

Put this shareSheet logic in a base class, or a mixin, or a function. Bada boom, bada bam!

Another concern mentioned is that some sheets' CSSOM might change in real time. Well, this is very rare, most of you will probably never encounter this. In that case though, another 5 minutes and we wireup a MutationObserver. No biggie!

Developing the rest of a project with Custom Elements after these simple 10-minute solutions will be so worth it, even without native support for global shadow dom styles.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/909#issuecomment-1793327671
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/909/1793327671@github.com>