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

```js
customElements.define('cool-list', MyElement, { stylesheet:  new CSSStyleSheet(`
  :scope { ... (A)},
  :scope > cool-item { ... (C)},
  :scope > :not(cool-item){ display:none; }
`);});
```

This shouldn't work, as per the current CSS scoping rule.
Host's children are *out of scope* in any case, from the perspective of a style rule defined in a shadow tree.

To satisfy such a requirement, I think we have to introduce a new combinator or a new pseudo class, such as:
```css
:host ======> coolitem { ... }
:host::child-in-real-tree(cool-item) { ...}
```

I don't think we want to introduce another primitives. :(


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