Re: [w3c/webcomponents] idea: Allow light DOM to delegate styles/behavior to shadow DOM (#883)

I forgot that we can programmatically select nodes (though not as obvious) with `this.shadowRoot.assignedNodes(...)[0].querySelector('.bar')` (might require a for-loop) to get the descendants of the distributed nodes, but this is not so convenient compared to `this.shadowRoot.querySelector('::sloted([slot=foo]) .bar')`. Note that I used `[slot=foo]` to target only nodes distributed to a certain slot.

Although we can currently select nodes using that `assignedNodes`-with-`querySelector` technique, we still can not target them with CSS. I think it'd be great for `::slotted(.foo) .bar` to do what it seems it would intuitively do.

Your last end-user example would be as follows if the custom element could rely on `::slotted()` doing the intuitive thing:

```html
<x-dialog>
  <heading>
    <h1 class="dialog-h1">Hello world</h1>
    <button class="close-btn" aria-label="close" onclick="someCallback"></button>
  </heading>
  <section>
    <h2 class="dialog-h2">How are you doing?</h2>
    <p>Lorem ipsum dolor sit amet</p>
  </section>
</x-dialog>
```

-- 
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/883#issuecomment-657143509