Support for multiple containers / components on page

[teosbb]

When I add multiple containers/contained elements on the page the polyfill behaves strange. Would be nice to have a example for multiple containers / unit tests.

Example 1 (normal website): we have one (global) container and two contained Variant 1: https://stackblitz.com/edit/cqfill-multiple-containers?file=index.html Variant 2: https://stackblitz.com/edit/cqfill-one-container-multiple-contained-media?file=style.css it works as expected then.

Example 2 (Component based development): - we have two containers and two contained (basically if you develop isolated component based > webcomponents, angular,.... it's always this case): https://stackblitz.com/edit/cqfill-multiple-containers-multiple-components?file=index.html

only the first will work because of the --css-container variable?

I think the postcss plugin should process it > make a central container or use multiple --css-container variables

[ghost]

Your suggestion seems logical. I've been butting up against this as well.

Also want to thank everyone who is contributing to this project - this polyfill will help boost adoption of one of the most interesting new specs!

[jonathantneal]

Thanks for the great reproduction. I was able to replicate it, while seeing that the issue was not present in my current testing demos. I’m going to spend more time looking into why this is and hopefully pushing a solution soon.

[jasikpark]

Shouldn't it depend on what element the javascript adds the --css-contain variable on? Basically that's how it is scoped?

[jasikpark]

Maybe the postcss function can produce css module style css variables? --css-contain-asdf;lkj

So that multiple containers can all track their container sizes?

[Blazsoul]

Do you got any workaround guys? it can really help me out

[jasikpark]

It looks to me like

@media --css-container and (min-width: 800px) {
 ._titleLink_1ub1h_13 {
  grid-template-columns:1fr 2fr 1fr;
  grid-template-areas:"unofficial distractible scoreboard"
 }
}

is querying --css-container on :root and so when we have multiple containers on the same page, we have a race condition on which container's state is stored in that variable..

So something like --css-container-12354 and --css-container-ad;lkfj I think would be good for a per-container tracking of the container status.

[Blazsoul]

Absolutely, But i don't think this polyfill is being maintained anymore though. I tried to have a look in the code and i assume that this line:

const hasContainerQueryPolyfill = mediaText.indexOf('@container') === 0 || mediaText.indexOf('--css-container') === 0

returns false for the rest of the containers.

[jasikpark]

It looks like the polyfill needs to be updated for container names to support multiple containers now that the spec supports it!

[Blazsoul]

Indeed, thats definitely a deal breaker

[Blazsoul]

Pull request fix: https://github.com/jsxtools/cqfill/pull/14