Re: [csswg-drafts] [css-anchor] anchor-name should not leak out of a shadow tree (#7916)

My example would be something like, uh:

```html
<div id="host">
  <template shadowroot="open">
    <div part=foo>
      <div id=child part=bar></div>
    </div>
    <style>
      :host {
        container-name: shadow;
        container-type: inline-size;
        width: 200px;
      }
      #child { color: red; }
      @container shadow (width = 200px) {
        #child { color: green; }
      }
    </style>
  </template>
</div>
<style>
#host::part(foo) {
  container-name: shadow;
  container-type: inline-size:
  width: 150px;
}
</style>
```

That is, the shadow establishes some CQ container and queries it, but a light-DOM stylesheet sets the same container name/type on a different element. Does this work, intercepting the CQ and making it evaluate false?

Then if the outer page does 

```css
@container shadow (width = 150px) {
  #host::part(bar) { color: blue; }
}
```

does it match?

I think the most reasonable answer is that both CQs should be true, referring to different container elements, because the `@container foo` is a tree-scoped reference and `container-name` is a tree-scoped name, so the CQ inside the shadow resolves against the host element, while the one in the light resolves against the part=foo element. Anything else exposes internal shadow details.

(Letting the light-dom CQ resolve to *anything* inside the shadow also reveals internal details, namely that part=foo is an ancestor of part=bar, but I think that's somewhat unavoidable.)

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


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

Received on Tuesday, 25 October 2022 20:15:35 UTC