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

I haven't been following some of the latest conversation too closely, but I think Justin and Lea's plea to keep this concept as streamlined as possible is a sound one. My own personal goal would be to "collapse" a couple of similar yet distinct concepts we now have for "scoped CSS" (to echo @mayank99's comments).

Consider this:

```html
<my-component>
  <template shadowrootmode="open">
    <p>Hello darkness, my old friend.</p>
    <slot></slot>
      
    <style>
      :host {
        border: 3px solid orange;
      }

      p {
        color: maroon;
      }
    </style>
  </template>
  
  <p>Hello world.</p>
      
  <style>
    @scope {
      :scope {
        display: block;
        background: lightgray;
      }

      p {
        color: green;
      }
    }
  </style>
</my-component>
```

With prelude-less scope now supported, we have a platform-native way of styling just the light DOM elements inside the component including the component itself—but not the DSD part. And we also have a way of styling just the elements inside the DSD, but nothing in light DOM (except for limited support through `::slotted`). How might we combine the two?

```html
<my-component>
  <template shadowrootmode="open-stylable">
    <p>Hello darkness, my old friend.</p>
    <slot></slot>
  </template>
  
  <p>Hello world.</p>
      
  <style>
    @scope {
      :scope {
        display: block;
        background: lightgray;
        border: 3px solid orange;
      }

      p {
        color: green;
      }

      /* we could leave it at that, but do we also need a way to target things in shadow DOM specifically?
         spitballing: */
      :shadowdom p {
        color: maroon;
      }
    }
  </style>
</my-component>
```

And of course if we wanted to externalize all these styles, we could switch to a `@scope (my-component) {` block and put that in a `.css` file.

On that important "how do we switch from Vue/Svelte/etc." question, I feel like this sort of approach would solve the majority of use cases. Maybe there are additional use cases which could take advantage of layering and other more surgical options, but do many component and/or page authors need that? I wonder. 🤔

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

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