Re: [w3c/webcomponents] Allowing CSS combinators postfixed to the ::slotted() selector (#889)

> parts are exposed public parts of a component

The to make sure we're on the same page, the OP is not talking about exposing parts of a component to the user, the OP is talking about the component being able to more fully work with the tree that the user passed into the component as a distributed/slotted tree; to be able to _more easily_ access that tree in style context (we can already access the, and style all of its elements).

In React, for example, this is easy to do. The component author simply iterates over the array `this.props.children` and can work with anything as needed: read data, change styling, replace props, etc, before finally passing it into the component's internal ("shadow") tree, all without affecting the component user's outside interface. It's like a map function: it takes a set of children as input (with their descendants) and can map it to whatever the component author desires.

This easy flexibility is what the OP is asking for, but for Web Components, and in this case the `::slotted() .foo` selector with combinators would add that flexibility in the context of CSS styling.

The main thing to note, is that _Web Component authors can already access all light DOM and style the elements any way they wish._ The OP only aims to make it easy to implement for WC authors.

### implementation example using current available APIs:

- The CE author defines a custom element named `<foo-bar>`.
- In the foo-bar element's `connectedCallback`, for the first instance of `<foo-bar>` in a document or shadow root, the CE author attaches a `<style>` element to the document or shadow root where the `<foo-bar>` element lives.
- The `<style>` element contains `foo-bar .foo {...}` to style any `.foo` elements that are descendants of `<foo-bar>` elements
- Any of the styled `.foo` elements may be descendants of elements that will be slotted into `<foo-bar>` (effectively this achieves the equivalent `::slotted() .foo` that the OP asks for).
- In the element's `disconnectedCallback`, when there is only one instance of `<foo-bar>` left (achieved with ref counting) in the document or shadow root where the aforementioned `<style>` element is placed, the `<style>` element is removed.

So you see, what the OP asks for is totally possible today. The OP merely asks for a concise and simple syntax option.

-- 
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/889#issuecomment-683999124