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

> are you talking about assigned nodes or any descendent of assigned nodes?

@rniwa Now that he cleared it up with examples, @calebdwilliams is referring
to styling descendants of assigned nodes. We both proposed a way to do it,
and also ways to make it easier to select those elements.

> if it's latter, then there is a problem with ambiguity. A node can have N ancestor nodes each of which can have its own shadow root.

@rniwa what did you mean by that? And now that the examples are clear, does
that concern still hold?

I would imagine that the styling (and selection) would only apply to elements
in the custom element's light tree, and does not penetrate into any shadow
roots of that light tree.

However I can imagine no-penetration being undesirable for certain cases. For
this I think we can incorporate the existing `::part` selector. For example
the selector `::slotted(.foo) .bar::part(lorem)`.

If we improve `::slotted` to allow more targeting like above examples within
CSS, it would be nice to allow APIs like `querySelector` to also be able to
select those things.

Perhaps `querySelector` would only return results when called on elements or
ShadowRoots that have descendant `<slot>` elements within their light tree
and those `slot` elements have assigned nodes that match.

For example,

- `this.shadowRoot.querySelector('::slotted(*) .foo')`: Returns all elements
  with class `foo` that are descendants of any elements slotted into `<slot>`
  elements within `this.shadowRoot`.
- `this.shadowRoot.children[0].querySelector('::slotted(*) .foo::part(bar)')`:
- Returns all the elements that are `::part(bar)` within custom elements that
  have class `foo` (there could be multiple custom elements with class `foo`,
  so we can select multiple elements that are `::part(bar)`), where the custom
  elements are descendants of any elements slotted into `<slot>` elements
  within `this.shadowRoot.children[0]`.
- Of course any combinators like `root.querySelector('::slotted(*) > ul > li')`,
  `querySelector('::slotted(.foo) + p')` (even if the `<p>` is distributed to a
  different slot), etc, would work (same in CSS)

It seems to me like this would be great and super useful.


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