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

> "how do I use bootstrap in web components"

It seems to me that this is already somewhat solvable in userland using `adoptedStyleSheets`. As long as we're talking about open shadow roots, a page author can traverse the DOM, find all `shadowRoot`s, and append a constructable stylesheet into their `adoptedStyleSheets`.

> With adopted stylesheets, how bad would it be to apply the same stylesheet to all elements? Is there a negative performance impact even when it's same stylesheet in memory?

I ran [a quick benchmark](https://bl.ocks.org/nolanlawson/raw/22734dd8c40799f4f90eae3ae755131d/) and, in Chrome at least, there doesn't seem to be a big perf difference between injecting the same stylesheet into multiple shadow roots versus just having a single `<style>` tag in the `<head>` (using light DOM). So it seems viable perf-wise.

The main blocking issues with this approach seem to be:

1. `adoptedStyleSheets` [only work](https://stackoverflow.com/q/64688839) with constructable stylesheets. So e.g. a remote `bootstrap.css` wouldn't work unless its content could be injected into a constructable stylesheet (and dealing with relative paths, `@import`s, etc.).
2. As [previously said](https://github.com/WICG/webcomponents/issues/909#issuecomment-743262094), you would have to use `MutationObserver` or something to watch for any DOM changes (unless you have full control over the page).
3. It doesn't easily solve scoping, e.g. having one part of the DOM use Bootstrap whereas another uses Bulma. But I'm not sure how common of a use case this is.

Maybe solving the first issue (`adoptedStyleSheets` requiring constructable stylesheets) would solve most usecases of "I just want to use Bootstrap everywhere"?

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

Received on Tuesday, 13 April 2021 20:37:55 UTC