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

@annevk Do we need a way to give full UA-like style including descendants for this case?

E.g. Imagine `<cool-list>` and `<cool-item>`, both are quite dumb custom element that only needs styling.  But specifically, `<cool-list>` wants to have style for `<cool-item>` when they are direct children under the element.

You want this UA-like stylesheet.
```css
cool-list {
  ... (A)
}
cool-item {
  ... (B)
}
cool-list > cool-item {
  ... (C)
}
```
So (A) and (B) can be achieved by adding `:host { ... (A) }` and `:host { ... (B) }` to the custom element registry for each, the (C) is problematic in this case.

One pessimistic idea is just giving up for such case to provide UA-like shadow for custom elements, and ask authors write its shadow DOM and style accordingly, such as
```html
<cool-list>
  <#shadow-root>
     <style>
      :host > * { display: none; }
      :host > cool-item { display: list-item; ... (C) }
     </style>
     <slot></slot>
   </#shadow-root>
</cool-list>
```

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