::slotted() should full support complex selector!!

[minzojian]

i wrote a demo here

for good to SEO,we need support a clear dom structure in html, eg. there is a navbar component,and i add some links inside,and planning to inject them into a navbar component. (even it is not for good to SEO, as a common reuseable component, elements should be inject outside freely)

  <my-navbar>
    <ul>
      <li>link1</li>
      <li>link2</li>
      <li>link3</li>
      </ul>
  </my-navbar>

however when i try to add some style for the < li > tag inside my navbar, it just not work
i found a explanation that slotted is just use simple selector
i wonder why the ::slotted selector can't support the complex selector (or child selector)?
::slotted() should full support complex selector
it just lame if not support

just copied from WICG/webcomponents#745

[keithamus]

I'm going to Agenda+ this as I'd like to discuss the feasibility of this. In web-platform-tests/wpt#50337 tests were added that exercise ::slotted(:has()) which pass today in Safari & Firefox, resulting in inconsistent interop. I'd like to confirm if it's feasible for us to relax ::slotted(<compound-selector>) and perhaps allow for ::slotted(<complex-selector>).

[gsnedders]

I'm going to Agenda+ this as I'd like to discuss the feasibility of this. In web-platform-tests/wpt#50337 tests were added that exercise ::slotted(:has()) which pass today in Safari & Firefox, resulting in inconsistent interop. I'd like to confirm if it's feasible for us to relax ::slotted(<compound-selector>) and perhaps allow for ::slotted(<complex-selector>).

To cross-ref this: the tests added in that PR link to #10586, which I think is trying to resolve #6867.

[emilio]

@keithamus curious, did invalidation of ::slotted(:has()) actually work?

[css-meeting-bot]

The CSS Working Group just discussed ::slotted() should full support complex selector!!.

The full IRC log of that discussion

<TabAtkins> lea: representing this since it's opened by a non-member
<TabAtkins> lea: since ::slotted() only does compound selectors, it imposes constraints on the markup that aren't good for a11y, seo, etc. forces a shallower structure than is ideal
<TabAtkins> lea: in many cases you ahve new components thata re just a div, but that way you have logic and styling in them. <carous-el> and <carous-el-item>
<TabAtkins> lea: lots of instances of this, parent control and dummy child control, just to get ::slotted access
<TabAtkins> lea: so lots of people confused
<TabAtkins> lea: usual pushback is hard to implement
<TabAtkins> lea: and pushback against ::slotted() a combinator is it doesn't support complex selectors
<TabAtkins> lea: think we'll need to do that at some point anyway, and then we'll have a pseudo-element with complex selectors, which is worse
<TabAtkins> lea: so i think this adds to the pile of reasons slotted should be a combinator (not to beat a dead horse)
<TabAtkins> lea: i hear the arguments about not breaking encapsulation, don't want a component tos tyle light dom... i disagree, but i get them
<TabAtkins> lea: but for things inside the component's own light-dom subtree, it's arbitrary to say they can style their direct chidlren but not descendants
<TabAtkins> lea: like how would we do <tab-el>? or <s-el-ect>?
<TabAtkins> astearns: in your comments you said usual complaint is hard to implement. i think keith put this on here to ask
<TabAtkins> TabAtkins: do we want to delay until Emilio returns, then?
<TabAtkins> ntim: i wanna hear from Ryosuke as well
<TabAtkins> astearns: so maybe we can take this up... would this be okay to take up in the Forms TF? can we get ryosuke to join that?
<TabAtkins> ntim: how is that forms related...
<TabAtkins> astearns: so we're closing this with "i dunno" for now