- From: Rune Lillesveen via GitHub <sysbot+gh@w3.org>
- Date: Tue, 08 Nov 2022 13:54:47 +0000
- To: public-css-archive@w3.org
> My example would be something like, uh:
>
> ```
> <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?
Yes, the part rule will make this case go red because we don't use tree-scoped names for container-name because the spec doesn't say anything about it, we just look up shadow-including ancestors.
> Then if the outer page does
>
> ```css
> @container shadow (width = 150px) {
> #host::part(bar) { color: blue; }
> }
> ```
>
> does it match?
Yes, the container queries try to match the same container in both cases.
> 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.
That might be the best behavior, but the spec does not mention container-name as a tree-scoped name at all.
> (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.)
We should open an issue against the css-contain spec for this.
--
GitHub Notification of comment by lilles
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7916#issuecomment-1307257544 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 8 November 2022 13:54:49 UTC