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

Since we are talking about frameworks, I want to give an example of how I would like open styleable to fit within existing workflows.

Consider a component that renders this piece of markup:

```html
<div>
  <template shadowrootmode="open">
    <p>In the shadow</p>
  </template>
</div>

<p>In the light</p>
```

In an open-styleable world, I would be able to leverage the framework's CSS scoping mechanism to style both `<p>` tags at the same time.

In Vue, Astro, Svelte, it looks like a simple `<style>` tag:

```css
<style>
  p { color: hotpink; }
</style>
```

The framework then processes both the markup and the styles to use hashed classes/data attributes. ([Example](https://stackblitz.com/edit/github-oun1lr-kcqbip?file=src%2Fpages%2F_MyComponent.astro) built using Astro)

| HTML | CSS |
| --- | --- |
| ![devtools showing hashed data attribute added to both paragraph tags](https://github.com/WICG/webcomponents/assets/9084735/b7b618ab-bfbc-4dfd-9370-6970418cf507) | ![devtools showing the p selector is changed to p[data-astro-cid-kh5idzpw]](https://github.com/WICG/webcomponents/assets/9084735/47ae767d-e6de-4d31-b756-07be60765738) |

And open-styleable would simply pass along all document styles into the shadowroot. Nothing else needs to be changed.

The original idea suggested this as a different mode:
```html
<template shadowrootmode="open-styleable">
```

It could also be a different attribute (and corresponding property of `attachShadow`):
```html
<template shadowrootmode="open" styleable>
```

It's simple but super effective. I feel like we should acknowledge that there's value in this even if it doesn't solve the needs of every single person (there can still be other, additional ways of addressing those).

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

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