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

> holistic overview to styling custom elements and shadow DOM since there appear to be several overlapping approaches.

That makes sense.  Here the scenarios we've run into so far that need styling:

1. Custom elements need some equivalent of "user agent styling", to set up how they look by default; at *minimum*, they need to be able to set `display` so the page doesn't render totally screwed up.  Preferably this should be possible without requiring a shadow root.  This must apply thru shadows; that is, it can't be done by a global stylesheet just applying a `x-foo {...}` style.

2. Custom elements with shadows need a way to style all of their contents.

3. Authors using custom elements need a way to style them.

4. Maybe need some way to style all instances of a particular element in the page the same way? Like make all buttons look the same.

---

#1 is this proposal - attach some styles to the element at registration time, they're treated as user-agent origin.

#2 is stylesheets in the shadow root.

#3 is custom properties, applied via var() and @apply.

#4 I'm not sure about yet, but Hayato's idea addresses it.

---
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-206533231