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

Just wanted to +1 this. We want the ability to only declare utility styles once instead of having to inject them into each component and add bloat to a project. We are dealing with a client on a design system project right now who is bringing this up as an issue. This also may allow for nicer component user API breakdowns so you could do something like this and allow for these to be separate component pieces, but I could target `my-list-item` within a zebra variant without having to do hurdles passing custom properties from `my-list.css` to `my-list-item.css`. It allows the cascade in CSS to do its thing. Ideally we'd want something scoped around the entire design system library (we typically create libraries that are between 50 and 100 components) and then let those component work together.

```
<my-list class="u-margin-bottom-32" variant="zebra">
  <my-list-item>Item 1</my-list-item>
  <my-list-item>Item 2</my-list-item>
  <my-list-item>Item 3</my-list-item>
  <my-list-item>Item 4</my-list-item>
</my-list>
```

```
/*CSS*/
/* my-list-item.css */
.my-list__item {
  background: #ffffff;
}

/* Makes every other row gray */
.my-list--zebra .my-list__item:nth-child(2n) {
  background: #dddddd;
}
```



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

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