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

> That being said, allowing arbitrary access to the slotted DOM is a bit fishy. That way you start depending on the shape of your slotted DOM tree and that reintroduces the same issue that you're trying to solve with shadow DOM in the first place, which is making an isolated, reusable component. I think that's the point that @catastrophe is making, which I agree with.

@emilio In some ways, I feel you both on that sentiment.

But there are other possibilities too. The idea is that we allow custom element authors to be more inventive by giving them flexibility.

For example, a custom element author may describe certain usage requirements in the component documentation, and it could require a user to nest element like so, where the `foo-` prefix denotes the elements from the component author's `foo` lib:

```html
<foo-interesting-layout>
  <div slot="left">
    ... any other stuff ...
    <foo-close></foo-close>
    ... any other stuff ...
  </div>
  <div slot="center">
    ... any other stuff ...
    <foo-open-left></foo-open-left>
    ... any other stuff ...
    <foo-open-right></foo-open-right>
    ... any other stuff ...
  </div>
  <div slot="right">
    ... any other stuff ...
    <foo-close></foo-close>
    ... any other stuff ...
  </div>
</foo-interesting-layout>
```

Now, the `foo-` lib author needs to style the slotted elements, as well as the nested `foo-` elements are certain way for this layout (f.e. positioning, or something). They could use `::slotted()`, `::slotted() foo-close`, `::slotted() foo-open-left`, and `::slotted() foo-open-right` in order to perform the necessary styling.

In my mind, this sort of nesting is a totally valid thing that a library author could document as a requirement, and therefore should have some easy way to perform the styling.

**The most important thing to note is that performing the styling is entirely possible today, the feature I ask for only makes it easier with less code.**

The way we can do it today is the library author places a `<style>` element in the nearest root (be that the Document, or nearest ShadowRoot). That of course is less ideal, but completely doable.

If the author was able to use `::slotted() foo-open-left`, it would keep the styling **_co-located with the components it is meant to accompany without extra complication and maintenance burden_**.

As with many features of a language or API, there's wrong ways to do just about anything, but I do believe this feature would give authors easier inventiveness without (for example) having to track root nodes and ensure that they don't have duplicate `<style>` tags.

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