Re: [csswg-drafts] [css-contain] CQ vs shadow boundaries (#5984)

After an off-line discussion with @andruud we think the discussed behavior could be specified as:

In https://drafts.csswg.org/css-contain-3/#query-container, change:

"... styling its descendants ..."

to:

"... styling its shadow-including descendants ..."


And add:

"For selectors with pseudo elements, query containers can be established in the shadow-including inclusive ancestors of the originating element."

Resolving on this could also resolve issue #6711.

1. ::slotted() selectors can query containers inside the shadow tree (including the slot itself)
2. ::part() selectors can query the host, but not internal query containers inside the shadow tree
3. ::placeholder and ::file-selector-button can query the input element, but not any internals if the input element is implemented using Shadow DOM
4. ::before, ::after, ::marker, and ::backdrop queries its originating element
5. ::first-letter and ::first-line queries its originating element, even if the fictional elements may be pushed down past other elements establishing query containers for the purpose of inheritance and rendering.
6. Multiple pseudo elements do not allow pseudo elements to be query containers for other pseudo elements. E.g., the host, but not the part() can be the query container for ::before in: `host::part()::before`. Similarly, the ::before element can not be the query container for the ::marker in: `div::before::marker`.

I have uploaded a Chromium CL with supporting tests for the Shadow DOM cases here:

https://chromium-review.googlesource.com/c/chromium/src/+/3304155


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


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

Received on Saturday, 27 November 2021 16:44:20 UTC