Re: [w3c/webcomponents] Provide a lightweight mechanism to add styles to a custom element (#468)

> Side question: If you don't use Shadow DOM on the custom element, what are you doing currently to make sure your custom elements wouldn't accidentally get styled by some of your other rules?

Every component is styled prefixed. Here an [io-toggle](https://gitlab.com/eyeo/adblockplus/abpui/adblockplusui/blob/master/css/io-toggle.scss), an [io-scrollbar](https://gitlab.com/eyeo/adblockplus/abpui/adblockplusui/blob/master/css/io-scrollbar.scss) or an [io-big-toggle](https://gitlab.com/eyeo/adblockplus/abpui/adblockplusui/blob/master/css/io-big-toggle.scss) and an [io-list-box](https://gitlab.com/eyeo/adblockplus/abpui/adblockplusui/blob/master/css/io-list-box.scss).

Components work well together and we never put a toggle inside a toggle or a table inside a table (lucky us) so that [stuff like this](https://webreflection.github.io/eyeo/custom-elements/smoke/io-filter-table.html) comes easily together (that's a prototype and will change or break in time so just use it as example, not prod code). That's a mix of `io-filter-table` with inside an `io-filter-search` and an `io-filter-list` plus `io-scrollbar` and `io-toggle`, it handles hundred thousands of rows like that so we can say Custom Elements without ShadowDOM already work great.

> ... if we can agree on extending the scope of the default style ...

FWIW, I think having the ability to define both shadow/not-shadow cases would be ACE. Less magic involved and more control for the users.

```js
customElements.define(
  'custom-element',
  BaseElement,
  {
    nativeStyles: [nativeSheet],
    shadowStyles: [shadowSheet]
  }
);
```

That gives the component the flexibility to be styled until initialized with its Shadow root, and makes also shadowStyles more composable.

The assumption in this suggestion is that both are able to reach any node through any selector, just like a good old scoped style would've done.

Both, would be optional too.

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