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

@TakayoshiKochi https://github.com/w3c/webcomponents/issues/468#issuecomment-371453775
> 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.


Personally, I'd implement it as:
```js
var listcss= new CSSStyleSheet(':host { ... (A)}');
customElements.define('cool-list', MyElement, { stylesheet: listcss});
var itemcss = new CSSStyleSheet(':host { ... (B)}, :host-context(cool-list) { ... (C)}');
customElements.define('cool-item', MyElement, { stylesheet: itemcss });
```


However, I'd say being able to do something like below, would be intuitive.
```css
customElements.define('cool-list', MyElement, { stylesheet:  new CSSStyleSheet(`
  :scope { ... (A)},
  :scope > cool-item { ... (C)}
`);});
```

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