Re: [csswg-drafts] [css-conditional-5] Clarify behavior of named container queries in shadow trees (#12090)

I realized I never left an opinion here, so if you don't mind... 

I'm in the situation of created a web-component-based library. Things such as `<my-button>`, `<my-stack>` etc. 

One of the components I'm also creating is a Container Query component: `<my-container>`. It default to `container-type="inline-size"`. It also allows you to add a `container-name` through an attribute `containername="custom-container-name"`. Ideally these styles would be placed on an element in shadow-dom that wraps the slot, e.g. 

```html
<my-container>
  <template shadowrootmode="open">
    <div style="container: {name} / inline-size;">
      <slot></slot>
    </div>
  </template>
</my-container>
``` 

Imagine now that a dev using my library wants to use the components in the following way:

```html
<my-container name="outer">
  <my-stack>
    <my-container name="inner">
      <my-button>hi</my-button>
    </my-container>
  </my-stack>
</my-container>
```

Given that named containers currently do not escape the flat tree, this is nearly impossible to provide to consumers of my library without some crazy hacks. 

If you take the names away, you cannot target the previously-named "outer" container from `<my-button>`. 

---

Another, maybe simpler, situation is where you have a `<my-page>` element, and you want to allow consumers of your library to query how wide the "page" is. 

However, what if another custom element between `<my-page>` and `<my-button>` has an unnamed container query in it? Now they don't have access to `<my-page>`'s unnamed query, and they cannot access it if we try to name it. :(

```html
<my-page>
  <template shadowrootmode="open">
    <div style="container: page / inline-size">
      <slot></slot>
    </div>
  </template>
  <my-other-thing-with-a-query>
    <my-button>hi</my-button>
  </my-other-thing-with-a-query>
</my-page>
```

So this feels pretty limiting to not have named container queries use the flat tree. :)

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


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

Received on Friday, 16 May 2025 23:02:13 UTC