Re: [csswg-drafts] [css-shadow-parts] Make `::slotted()` a combinator (#7922)

I'd like to outline a concrete use case.

For example, suppose we want to have a `<foo-layout>` element that can style children and nested children a certain way. Suppose we use it like this (contrived names for sake of example):

```html
<foo-layout>
  <foo-layout-item>foo</foo-layout-item>
  <foo-layout-item>bar</foo-layout-item>
  <foo-layout-item>baz</foo-layout-item>
</foo-layout>
```

and somehow it lays out the children in a layout. In this example, children are slotted to the default slot.

The example above is totally doable, not problem so far.

Now suppose we also want to define a nested syntax for the layout features. For example:

```html
<foo-layout>
  <foo-layout-item>foo</foo-layout-item>
  <foo-layout-item>
    bar
    <foo-divider></foo-divider>
    baz
    <foo-divider></foo-divider>
    lorem
  </foo-layout-item>
  <foo-layout-item>ipsum</foo-layout-item>
</foo-layout>
```

where in this example, the `<foo-divider>` can be use specifically as a child of a `<foo-layout-item>` that is a child of the `<foo-layout>` to achieve a certain effect. Also imagine that `<foo-divider>` can be used completely outside of `<foo-layout>` for other use cases and with differing effects.

In that example, we currently _cannot_ apply a special style to the `foo-divider` element from the `foo-layout`'s shadowroot styles.

The style that we would want to write, from inside of the `foo-layout` element's ShadowRoot styles, would look like the following with hypothetical syntax that is currently not supported:

```html
::slotted(foo-layout-item) > foo-divider {
  /* Target any foo-divider that is direct child
  of a slotted foo-layout-item, to give it some specific
  sizing within the specific layout context, for example */
}
```

It would be possible to write style inside of the `foo-divider`'s shadow dom using [`host-context()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:host-context), but that would not be ideal. Imagine that instead of `<foo-divider>` we actually are using [`<sl-divider>` from Shoelace](https://shoelace.style/components/divider). We do not want to arbitrarily inject `host-context()` styles into 3rd party elements, as that would be very hacky (if their roots are closed, that would be even hackier).

We want higher-up elements (`<foo-layout>` in the example) to be able to style light DOM in certain ways such that the child elements do not necessarily need to be aware of every single type of higher-up element they could be nested inside of.

In real-world practice, I have been writing new elements in my app using Shoelace, and in some of those higher-level layout elements, I want `<sl-divider>` certain ways (as opposed to make a new divider element).

Another way to achieve this is to make N different lower-down elements to use with N different higher-up elements. What I mean is, I could make

- `<foo-layout>` along with `<foo-layout-divider>` to work specifically together,
- `<foo-name-tag>` along with `<foo-name-tag-divider>` to work specifically together, 
- etc

but it would be more practical to make a single `<foo-divider>` that works differently (and intuitively) in various contexts, and I'd want to be able to do this with 3rd party elements easily (I am writing new layout elements, but I don't necessarily own `<foo-divider>`, and I don't want to have to re-implement `<foo-divider>` features in whole new elements).

-- 
GitHub Notification of comment by trusktr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7922#issuecomment-2045809975 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 9 April 2024 18:09:26 UTC