Shadow Container Query Polyfill

This repo is based on https://github.com/GoogleChromeLabs/container-query-polyfill with the added enhancement for shadow dom/web components.

If you find this work helpful please consider buying me a coffee.



____________________________

A small (9 kB compressed) polyfill for CSS Container Queries using ResizeObserver and MutationObserver supporting the full @container query syntax:

- Discrete queries (width: 300 and min-width: 300px)
- Range queries (200px < width < 400px and width < 400px)
- Container relative length units (cqw, cqh, cqi, cqb, cqmin, and cqmax) in properties and keyframes

Browser Support

- Firefox 69+
- Chrome 79+
- Edge 79+
- Safari 13.4+

Getting Started

$3

``bash
npm install --save shadow-container-query-polyfill
`

Alternatively, you can use it directly from a CDN:

`js

`

For the best user experience, it's recommended that you initially only use the polyfill for content below-the-fold and use @supports queries to temporarily replace it with a loading indicator until the polyfill is ready to display it:

`css
@supports not (container-type: inline-size) {
.container,
footer {
display: none;
}

.loader {
display: flex;
}
}
`

You can view a more complete demo here. On sufficiently fast networks and devices, or devices that natively support Container Queries, this loading indicator will never be displayed.

> Note
> Keep in mind that this technique effectively limits impact on FID and CLS, potentially at the expense of LCP. You may see regressions in the latter as a result, particularly on lower end devices or in poor network conditions.

Limitations

- CSS first: The polyfill currently only supports