[0.8] Shady style processor doesn't drop operator for ::content

[ssorallen]

Shadow land

In shady land the ::content pseudo element selector is simply dropped, but it's valid to treat it as a real element in selectors and surround it with operators like >:

#main > ::content [core-drawer-toggle]

<div id="main">
  <content></content>
</div>

<!-- Distributed content -->
<p>
  <button core-drawer-toggle>Toggle drawer</button>
</p>

That should be "select all [core-drawer-toggle] that is a descendant of a <content>, which is a child of #main". The distributed button is selected in the above case when ?dom=shadow is enabled.

Shady land

In shady land the ::content is just dropped:

Actual:

#main > [core-drawer-toggle]

Now the selector expects a different DOM structure: "select all [core-drawer-toggle] that are children of #main". The button in the above example is no longer selected.

Expected is to drop the operators surrounding ::content:

Expected:

#main [core-drawer-toggle]

[sorvell]

Thx for the clear write up and suggestion. Will make it so.

[ssorallen]

Cool thanks. I think operators on both sides have to be dropped and replaced with a single descendant selector to match shadow DOM as closely as possible.. For example:

/* Yes this is _weird_, but the selector works with real shadow DOM */
#main > ::content + [core-drawer-toggle]

should become:

#main[style-scope] [core-drawer-toggle]

[ssorallen]

Well that replacement will screw up in odd cases, but that might be close enough.

[ssorallen]

My example might be invalid because the recommendation is to wrap a <content> element and make it the only child of that wrapper.

[sorvell]

With the above change, these selectors should now be shimmed as follows:

a <left-separator> ::content <right-separator> b

a <right-separator> b

This should ensures that:

// selector
#main > ::content [core-drawer-toggle]
// shimmed selector
#main  [core-drawer-toggle]

// selector
#main > ::content > [core-drawer-toggle]
// shimmed selector
#main > [core-drawer-toggle]

// selector
#main ::content > [core-drawer-toggle]
// shimmed selector
#main > [core-drawer-toggle]

We also have an idea to improve shimming of ::content selectors that involves specifically tagging distributed elements.

[ssorallen]

🍻 Thanks, @sorvell.