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

It was not accidental from my side, and the implementation is in line with the spec.

The rationale for the current spec, is that #child will always match my-component for the container query in the example below. If we use flat tree descendants instead of shadow-including descendants, my-component's shadow tree may intercept the query, either by an implicit size container, if names are not used, or by a name clash (perhaps not likely). That behavior is a bit surprising too as it exposes internals of my-component.

```html
<style>
  @container foo size(width >= 400px) {
    #child { color: green; }
  }
</style>
<my-component style="width:400px; container: foo / inline-size">
  <div id="child">Not green?</div>
</my-component>
```

I don't have very strong opinions here, and I think there are pros and cons to both behaviors.

I think the part about starting from the originating element for selectors with pseudo element still holds, so not exposing shadow internals for ::part() is not affected by the choice.

@tabatkins Was this surprising to you too?

I think what we are looking at here is to possibly change the spec from using "shadow-including descendants" to "flat tree descendants". Changing the implementation in Blink is trivial.


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


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

Received on Friday, 4 March 2022 07:47:23 UTC