{"_id":"match-container","_rev":"5-85ac5317059867871ae115cb37c8b0e1","name":"match-container","dist-tags":{"latest":"0.1.4"},"versions":{"0.1.0":{"name":"match-container","version":"0.1.0","keywords":["polyfill","matchContainer","@container"],"author":{"url":"https://github.com/teetotum","name":"Martin Winkler"},"license":"MIT","_id":"match-container@0.1.0","maintainers":[{"name":"teetotum","email":"martin.winkler@avenga.com"}],"homepage":"https://github.com/teetotum/match-container","bugs":{"url":"https://github.com/teetotum/match-container/issues"},"dist":{"shasum":"6e684eb6a58ccacd2a0eeda2e7c35c7a2e060b8f","tarball":"https://registry.npmjs.org/match-container/-/match-container-0.1.0.tgz","fileCount":5,"integrity":"sha512-ZVPQUtnh/8Gx0mwwlnDfnl224A9GxVoV5LRlxF9fWs6AnBQ0TsFSaGVwSAwj6aD7LFOGuVTeI8KuBGBDTtbX4g==","signatures":[{"sig":"MEQCIBGGNpo4hoxnsBa5KpMJ/R6eopcaoDuVkBe6kJ7NHbjeAiBLtUZjrW4GvpFLXnwCgPMVVsceVYV00SkfTcInC5G4oA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10723},"main":"matchContainer.js","types":"types.d.ts","gitHead":"6a4901b9af69b99d2e936bed97b3a67e9466c2c0","_npmUser":{"name":"teetotum","email":"martin.winkler@avenga.com"},"repository":{"url":"git+https://github.com/teetotum/match-container.git","type":"git"},"_npmVersion":"9.7.2","description":"Polyfill for the proposed Element.matchContainer() API which is the corresponding scripting API to the @container query CSS feature.","directories":{},"_nodeVersion":"20.4.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/match-container_0.1.0_1740357795261_0.6072911135727559","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"match-container","version":"0.1.1","keywords":["polyfill","matchContainer","@container"],"author":{"url":"https://github.com/teetotum","name":"Martin Winkler"},"license":"MIT","_id":"match-container@0.1.1","maintainers":[{"name":"teetotum","email":"martinwinkler82@web.de"}],"homepage":"https://github.com/teetotum/match-container","bugs":{"url":"https://github.com/teetotum/match-container/issues"},"dist":{"shasum":"bab1c7c03837369850d62a6f7a91e363df5dea49","tarball":"https://registry.npmjs.org/match-container/-/match-container-0.1.1.tgz","fileCount":5,"integrity":"sha512-4J0pp4wi88Hf85C5zU7OsPuh/DlSKcU+yBwJMqWUZyTmaOqjPR3fG4H8W731SnnHQzM4Ii3Ts0AH0xug37GxGQ==","signatures":[{"sig":"MEYCIQCJakVL6uqbek+SwQfICSideMJ12SSNGzLNlyYvhtXm8QIhAPtDX6NbPAg4dBUDk+pNzy6R7Zz6r0JHvIl8p7a5cMOg","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11388},"main":"matchContainer.js","types":"types.d.ts","gitHead":"7bfc2756e993273b1039cb630a35801f54d036fe","_npmUser":{"name":"teetotum","email":"martinwinkler82@web.de"},"repository":{"url":"git+https://github.com/teetotum/match-container.git","type":"git"},"_npmVersion":"11.6.2","description":"Polyfill for the proposed Element.matchContainer() API which is the corresponding scripting API to the @container query CSS feature.","directories":{},"_nodeVersion":"24.11.1","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/match-container_0.1.1_1771792771885_0.5067893036586508","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"match-container","version":"0.1.2","keywords":["polyfill","matchContainer","@container"],"author":{"url":"https://github.com/teetotum","name":"Martin Winkler"},"license":"MIT","_id":"match-container@0.1.2","maintainers":[{"name":"teetotum","email":"martinwinkler82@web.de"}],"homepage":"https://github.com/teetotum/match-container","bugs":{"url":"https://github.com/teetotum/match-container/issues"},"dist":{"shasum":"7b65f3f603a22519cd0f72defa4d44869f0d4886","tarball":"https://registry.npmjs.org/match-container/-/match-container-0.1.2.tgz","fileCount":5,"integrity":"sha512-r9cb60hTrkeaM7/BZxHsd38rHTe7XGgagefpr0rVA7r6y0b65lG7OMKWw9BhibnvbjbiwEUc8FR2Lb1e7+lZMA==","signatures":[{"sig":"MEYCIQC+qKmrYMCW5KNQXN7LMMSuMnTq45yecbL599veqPkkQgIhAORFvEnT/hZGU/eDRlntGIsukMePcYBRnIsk5jlaIvBS","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11531},"main":"matchContainer.js","types":"types.d.ts","gitHead":"beb8b02793aa7a89e6f39b25559bced84789bfdb","_npmUser":{"name":"teetotum","email":"martinwinkler82@web.de"},"repository":{"url":"git+https://github.com/teetotum/match-container.git","type":"git"},"_npmVersion":"11.6.2","description":"Polyfill for the proposed Element.matchContainer() API which is the corresponding scripting API to the @container query CSS feature.","directories":{},"_nodeVersion":"24.11.1","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/match-container_0.1.2_1776758026475_0.5880923243404708","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"match-container","version":"0.1.3","keywords":["polyfill","matchContainer","@container"],"author":{"url":"https://github.com/teetotum","name":"Martin Winkler"},"license":"MIT","_id":"match-container@0.1.3","maintainers":[{"name":"teetotum","email":"martinwinkler82@web.de"}],"homepage":"https://github.com/teetotum/match-container","bugs":{"url":"https://github.com/teetotum/match-container/issues"},"dist":{"shasum":"46a2e1c61460ae3e1c620d4f772ab53db225d741","tarball":"https://registry.npmjs.org/match-container/-/match-container-0.1.3.tgz","fileCount":5,"integrity":"sha512-tWR/o8iOS+M4Cg7O7bIPaKvfp7S67rEb6NwkNERMWnC2YfJ6BA+nJAyRLuSOgTflp7s2zcaF5PjApgMJWFGBbw==","signatures":[{"sig":"MEUCIQDlcF7pCOfdbkNdJUn9IcEGO7YR2JOLXv0bz1O9XuTNnwIgMYjsVgEYgf5evgAzr3ZrykXc73LlXlOCJ1kaCG8Vmik=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12263},"main":"matchContainer.js","types":"types.d.ts","gitHead":"ca59f43d1c3be9f13b0729abe7a43757bb001bce","_npmUser":{"name":"teetotum","email":"martinwinkler82@web.de"},"repository":{"url":"git+https://github.com/teetotum/match-container.git","type":"git"},"_npmVersion":"11.6.2","description":"Polyfill for the proposed Element.matchContainer() API which is the corresponding scripting API to the @container query CSS feature.","directories":{},"_nodeVersion":"24.11.1","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/match-container_0.1.3_1778191072856_0.8342330565307743","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"match-container","version":"0.1.4","description":"Polyfill for the proposed Element.matchContainer() API which is the corresponding scripting API to the @container query CSS feature.","keywords":["polyfill","matchContainer","@container"],"homepage":"https://github.com/teetotum/match-container","bugs":{"url":"https://github.com/teetotum/match-container/issues"},"repository":{"type":"git","url":"git+https://github.com/teetotum/match-container.git"},"license":"MIT","author":{"name":"Martin Winkler","url":"https://github.com/teetotum"},"main":"matchContainer.js","types":"types.d.ts","gitHead":"0b1d42474b3a41985d70beb362318c698a23c900","_id":"match-container@0.1.4","_nodeVersion":"24.11.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-XSkuBPKIrglycOr3dPxVgxQI/QLfHWwIOm3u83p2Y/mMxM7OzV66uGGIG5Bdbh+6+gpgIoQQhN3jGSuyQKvfZg==","shasum":"49d3a7eba3b6f834a868ea7565462af043e3ca80","tarball":"https://registry.npmjs.org/match-container/-/match-container-0.1.4.tgz","fileCount":5,"unpackedSize":12600,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCU714LGCAvRsLryTTcnj4eCS+ur3ulf8r8FwAudm4DRwIgRHehLcrFHxkS4xvEaBxUj9m00MHzo+YCIAkhjAdmM8c="}]},"_npmUser":{"name":"teetotum","email":"martinwinkler82@web.de"},"directories":{},"maintainers":[{"name":"teetotum","email":"martinwinkler82@web.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/match-container_0.1.4_1781216807367_0.40604589181625284"},"_hasShrinkwrap":false}},"time":{"created":"2025-02-24T00:43:15.260Z","modified":"2026-06-11T22:26:47.605Z","0.1.0":"2025-02-24T00:43:15.423Z","0.1.1":"2026-02-22T20:39:32.041Z","0.1.2":"2026-04-21T07:53:46.594Z","0.1.3":"2026-05-07T21:57:53.000Z","0.1.4":"2026-06-11T22:26:47.503Z"},"bugs":{"url":"https://github.com/teetotum/match-container/issues"},"author":{"name":"Martin Winkler","url":"https://github.com/teetotum"},"license":"MIT","homepage":"https://github.com/teetotum/match-container","keywords":["polyfill","matchContainer","@container"],"repository":{"type":"git","url":"git+https://github.com/teetotum/match-container.git"},"description":"Polyfill for the proposed Element.matchContainer() API which is the corresponding scripting API to the @container query CSS feature.","maintainers":[{"name":"teetotum","email":"martinwinkler82@web.de"}],"readme":"# .matchContainer() Polyfill\r\n\r\nThe `match-container` package is a polyfill for the proposed `Element.matchContainer()` API which is the corresponding scripting API to the `@container` query CSS feature.\r\nIt is for `@container` what `Window.matchMedia()` is for the `@media` query CSS feature.\r\nA discussion of this feature can be found [here](https://github.com/w3c/csswg-drafts/issues/6205).\r\nThe polyfill provides support for both _container size queries_ and _container style queries_.\r\n\r\n## API and Usage\r\n\r\nTo use the polyfill all you need to do is to add it to your loaded scripts, either with a `<script>` element in your HTML document or by importing it into your main script with `import 'match-container'`. The polyfill has no exports.\r\nThe polyfill adds the `.matchContainer()` function to `Element.prototype` if and only if the prototype does not have a function with this name.\r\n\r\n### .matchContainer()\r\n\r\n```ts\r\nElement.matchContainer(containerQueryString: string)\r\n```\r\n\r\nThe function can be called on [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element) instances, the `containerQueryString` argument must be a syntactically valid `@container` query condition and must contain all parts that in the corresponding CSS would go between the `@container` and the rule block `{ ... }`.\r\nThe call returns a `ContainerQueryList` object (see below).\r\n\r\nExamples:\r\n\r\n- `.matchContainer(\"(width < 400px)\")` corresponds to the following CSS\r\n  <!-- prettier-ignore -->\r\n  ```css\r\n  @container (width < 400px) { ... }\r\n  ```\r\n\r\n- `.matchContainer(\"outer-container (width < 400px)\")` corresponds to the following CSS\r\n  <!-- prettier-ignore -->\r\n  ```css\r\n  @container outer-container (width < 400px) { ... }\r\n  ```\r\n\r\n- `.matchContainer(\"style(--my-property)\")` corresponds to the following CSS\r\n  <!-- prettier-ignore -->\r\n  ```css\r\n  @container style(--my-property) { ... }\r\n  ```\r\n\r\n- `.matchContainer(\"not style(--my-property)\")` corresponds to the following CSS\r\n  <!-- prettier-ignore -->\r\n  ```css\r\n  @container not style(--my-property) { ... }\r\n  ```\r\n\r\n- `.matchContainer(\"style(--themeColor: blue) or style(--themeColor: purple)\")` corresponds to the following CSS\r\n  <!-- prettier-ignore -->\r\n  ```css\r\n  @container style(--themeColor: blue) or style(--themeColor: purple) { ... }\r\n  ```\r\n\r\n- `.matchContainer(\"anchored(fallback: flip-block)\")` corresponds to the following CSS\r\n  <!-- prettier-ignore -->\r\n  ```css\r\n  @container anchored(fallback: flip-block) { ... }\r\n  ```\r\n\r\n### ContainerQueryList\r\n\r\nThe `ContainerQueryList` inherits from `EventTarget` and therefore supports event listeners.\r\n\r\nAn instance of `ContainerQueryList` exposes two properties:\r\n\r\n- `container: string` corresponds to the `containerQueryString` argument provided to `.matchContainer()`\r\n- `matches: boolean` use this property to check whether the container query matches\r\n\r\nTo be able to react to changes of the `matches` state you can add an event listener for the `change` event.\r\n\r\n```ts\r\nconst myElement = document.getElementById(\"my-element\");\r\nconst containerWidthQuery = myElement.matchContainer(\"(width < 400px)\");\r\ncontainerWidthQuery.addEventListener(\r\n  \"change\",\r\n  (event: ContainerQueryListEvent) => {\r\n    if (event.matches) console.log(\"The @container query matches currently\");\r\n    else console.log(\"The @container query does not match currently\");\r\n  }\r\n);\r\n```\r\n\r\n### ContainerQueryListEvent\r\n\r\nThe `ContainerQueryListEvent` is the event argument type produced by a `change` event on `ContainerQueryList`.\r\nIt exposes two properties:\r\n\r\n- `container: string` corresponds to the `containerQueryString` argument provided to `.matchContainer()`\r\n- `matches: boolean` use this property to check whether the container query matches\r\n\r\n## How it works\r\n\r\nWhen `Element.matchContainer()` is called the polyfill inserts a corresponding `@container` query into the CSSOM.\r\nThe observed element is tethered to an attribute selector inside this query block by a corresponding `data-*` attribute, ensuring the target element is the only element matched by this selector.\r\nWhen the `@container` query matches a prepared CSS custom property is set on the observed element.\r\nA style observer (heavily inspired by [Bramus' StyleObserver](https://github.com/bramus/style-observer)) finally triggers the callback in the script code.\r\n\r\n## Limitations\r\n\r\nThe polyfill only adds the scripting API part for `@container` queries, it does not polyfill the CSS feature and will therefore not work in any browser that does not support `@container` queries in CSS.\r\n\r\n## Feedback\r\n\r\nPlease don't hesitate to provide feedback by opening an issue or a discussion.\r\nIf you find a bug or experience that the polyfill isn't working when it should please let me know.\r\nI can only fix those bugs I am made aware of.\r\n","readmeFilename":"README.md"}