{"id":15015921,"url":"https://github.com/ijlee2/ember-container-query","last_synced_at":"2026-04-08T12:05:27.562Z","repository":{"id":38449340,"uuid":"264580288","full_name":"ijlee2/ember-container-query","owner":"ijlee2","description":"Make container queries that harness the power of Ember","archived":false,"fork":false,"pushed_at":"2026-04-01T11:47:35.000Z","size":6264,"stargazers_count":47,"open_issues_count":0,"forks_count":13,"subscribers_count":3,"default_branch":"main","last_synced_at":"2026-04-01T12:34:52.213Z","etag":null,"topics":["container-queries","container-query","element-queries","element-query","ember","ember-addon","emberjs","responsive-design"],"latest_commit_sha":null,"homepage":"https://ember-container-query.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ijlee2.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2020-05-17T04:03:33.000Z","updated_at":"2026-04-01T11:47:27.000Z","dependencies_parsed_at":"2023-12-18T22:23:45.773Z","dependency_job_id":"eb1dc649-ec51-4c67-a9fe-53fdef45b58f","html_url":"https://github.com/ijlee2/ember-container-query","commit_stats":{"total_commits":354,"total_committers":8,"mean_commits":44.25,"dds":"0.031073446327683607","last_synced_commit":"a055435128da6beb35ac554458a503d72266dbe7"},"previous_names":[],"tags_count":74,"template":false,"template_full_name":null,"purl":"pkg:github/ijlee2/ember-container-query","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ijlee2%2Fember-container-query","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ijlee2%2Fember-container-query/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ijlee2%2Fember-container-query/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ijlee2%2Fember-container-query/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ijlee2","download_url":"https://codeload.github.com/ijlee2/ember-container-query/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ijlee2%2Fember-container-query/sbom","scorecard":{"id":483433,"data":{"date":"2025-08-11","repo":{"name":"github.com/ijlee2/ember-container-query","commit":"b19f70fa9e012a938ab3536cd6b260c1f9ce9cff"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.7,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":6,"reason":"8 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 6","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":0,"reason":"Found 2/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/ci.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE.md:0","Info: FSF or OSI recognized license: MIT License: LICENSE.md:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:115: update your workflow using https://app.stepsecurity.io/secureworkflow/ijlee2/ember-container-query/ci.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:118: update your workflow using https://app.stepsecurity.io/secureworkflow/ijlee2/ember-container-query/ci.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:121: update your workflow using https://app.stepsecurity.io/secureworkflow/ijlee2/ember-container-query/ci.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:130: update your workflow using https://app.stepsecurity.io/secureworkflow/ijlee2/ember-container-query/ci.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:156: update your workflow using https://app.stepsecurity.io/secureworkflow/ijlee2/ember-container-query/ci.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:159: update your workflow using https://app.stepsecurity.io/secureworkflow/ijlee2/ember-container-query/ci.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:162: update your workflow using https://app.stepsecurity.io/secureworkflow/ijlee2/ember-container-query/ci.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:192: update your workflow using https://app.stepsecurity.io/secureworkflow/ijlee2/ember-container-query/ci.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:195: update your workflow using https://app.stepsecurity.io/secureworkflow/ijlee2/ember-container-query/ci.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:198: update your workflow using https://app.stepsecurity.io/secureworkflow/ijlee2/ember-container-query/ci.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/ijlee2/ember-container-query/ci.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/ijlee2/ember-container-query/ci.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/ijlee2/ember-container-query/ci.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/ijlee2/ember-container-query/ci.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:55: update your workflow using https://app.stepsecurity.io/secureworkflow/ijlee2/ember-container-query/ci.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:58: update your workflow using https://app.stepsecurity.io/secureworkflow/ijlee2/ember-container-query/ci.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:71: update your workflow using https://app.stepsecurity.io/secureworkflow/ijlee2/ember-container-query/ci.yml/main?enable=pin","Info:   0 out of  12 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   5 third-party GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 19 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":3,"reason":"7 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-19T17:11:49.237Z","repository_id":38449340,"created_at":"2025-08-19T17:11:49.237Z","updated_at":"2025-08-19T17:11:49.237Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31554163,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T10:21:54.569Z","status":"ssl_error","status_checked_at":"2026-04-08T10:21:38.171Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["container-queries","container-query","element-queries","element-query","ember","ember-addon","emberjs","responsive-design"],"created_at":"2024-09-24T19:48:09.249Z","updated_at":"2026-04-08T12:05:27.550Z","avatar_url":"https://github.com/ijlee2.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![This project uses GitHub Actions for continuous integration.](https://github.com/ijlee2/ember-container-query/workflows/CI/badge.svg)](https://github.com/ijlee2/ember-container-query/actions?query=workflow%3ACI)\n[![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/Isaac/ember-container-query)\n\n# ember-container-query\n\n_Make container queries that harness the power of Ember_\n\n\n## Installation\n\n```sh\npnpm add -D ember-container-query\n```\n\n\u003cdetails\u003e\n\n\u003csummary\u003eUse Glint and \u003ccode\u003e*.hbs\u003c/code\u003e files?\u003c/summary\u003e\n\nExtend this addon's template registry to get native types.\n\n```ts\n/* types/index.d.ts */\nimport '@glint/environment-ember-loose';\nimport '@glint/environment-ember-template-imports';\n\nimport type EmberContainerQueryRegistry from 'ember-container-query/template-registry';\n\ndeclare module '@glint/environment-ember-loose/registry' {\n  export default interface Registry extends EmberContainerQueryRegistry, /* other addon registries */ {\n    // local entries\n  }\n}\n```\n\n\u003c/details\u003e\n\n\n## Applications\n\nWhere can you use container queries? Here are real-life (and some theoretical) applications!\n\n\u003cdetails\u003e\n\n\u003csummary\u003eCreate reusable components that are independent of screen size ♻️\u003c/summary\u003e\n\n1. Components form a core of an Ember app. We love components!\n\n1. With media queries,\n\n    - A design that looked amazing on 2 or 3 fixed screen sizes can end up looking terrible at a size in-between.\n\n    - Designing the template for specific screen sizes isn't a future-proof solution. You may need to reuse the component under different local width and height constraints.\n\n    - In `ember-qunit` tests, the window is scaled by default. You may end up stubbing a service (fake the window size) to get certain DOM elements to (dis)appear.\n\n1. With container queries,\n\n    - A component only needs to know how much space it has to figure out how to best present data.\n\n    - Since each component can be free to decide how it looks, a webpage may end up with an unexpected combined look. This may be good, may be bad.\n\n    - In tests, you will be driven to [have a correct window size](https://crunchingnumbers.live/2020/06/07/container-queries-cross-resolution-testing/). If the window size is correct, then all elements should (dis)appear just like they would on your browser.\n\n\u003c/details\u003e\n\n\n\u003cdetails\u003e\n\n\u003csummary\u003eTo table or not to table? That is the question. 🤔\u003c/summary\u003e\n\n1. A table is great for showing structured data. On mobile, with a limited width, not so much.\n\n1. You can use a list to show data vertically. This works until the user rotates the screen and sees only so much at a time.\n\n1. You can use container queries to decide which table columns to show and how many columns to spread the list across.\n\n\u003c/details\u003e\n\n\n\u003cdetails\u003e\n\n\u003csummary\u003eCreate a customizable dashboard 🎛️ 🎚️\u003c/summary\u003e\n\n1. It's difficult to create dashboard widgets that can be placed anywhere and look good.\n\n1. As a result, you may artificially constrain your users from customizing their dashboard.\n\n1. If you _combine_ media and container queries, you can better meet the wants of designers, developers, and users.\n\n\u003c/details\u003e\n\n\n\u003cdetails\u003e\n\n\u003csummary\u003eResponsive images, videos, and D3 visualizations 🖼️ 📽️ 📈\u003c/summary\u003e\n\n1. Currently, you have to use [`srcset`](https://developer.mozilla.org/docs/Web/API/HTMLImageElement/srcset) to load images with the optimal file size. Alternatively, you can [use container queries to decide which images to load](https://crunchingnumbers.live/2020/06/03/container-queries-adaptive-images/).\n\n2. Similarly, for videos, you could use container queries to decide format and display resolution.\n\n3. D3 components can use container queries to decide what's the best way to show data. Do you show larger chart elements, show legends, allow scrolling, show text summary? etc.\n\n\u003c/details\u003e\n\n\n\u003cdetails\u003e\n\n\u003csummary\u003eCreate beautiful, printable pages 🖨️\u003c/summary\u003e\n\n1. You may be able to compose this addon with others to arrive at something ambitious and unique.\n\n1. For example, [`ember-printable-pages`](https://github.com/forge512/ember-printable-pages) lets us reuse components to make a printable document. The components could focus on presenting data with container queries, while `ember-printable-pages` could focus on deciding page layouts and lazily rendering components.\n\n\u003c/details\u003e\n\n\n\u003cdetails\u003e\n\n\u003csummary\u003eHide secrets in games 🎮\u003c/summary\u003e\n\n1. You're designing [a game in Ember](https://www.youtube.com/watch?v=Ld1xnQWkqPU).\n\n1. Maybe a secret, most powerful item appears when the game world is at a certain size? :)\n\n\u003c/details\u003e\n\nYou will find plenty of examples in [`docs-app`](./docs-app). Visit https://ember-container-query.netlify.app/ to see the app in action!\n\n\u003cdiv align=\"left\"\u003e\n  \u003cimg alt=\"A demo of ember-container-query shows a smooth transition when using a list or table to display data\" src=\"https://user-images.githubusercontent.com/16869656/82177207-72699c00-989e-11ea-9cb6-2e388c5e98c0.gif\" width=\"600\" /\u003e\n  \u003cimg alt=\"Another demo of ember-container-query shows a dashboard with widgets in mobile, tablet, and desktop resolutions\" src=\"https://user-images.githubusercontent.com/16869656/233708509-1fac7262-239b-4f73-a58e-2ffd62456a73.gif\" width=\"600\" /\u003e\n\u003c/div\u003e\n\n\n## API\n\n`ember-container-query` provides 1 Glimmer component and 3 helpers:\n\n- `\u003cContainerQuery\u003e`\n- `{{aspect-ratio}}`\n- `{{height}}`\n- `{{width}}`\n\nThe addon also provides a modifier so that you can opt out of using the provided component. You may also use the modifier to get the container dimensions when the window is resized.\n\n- `{{container-query}}`\n\nExpand the items below to learn more about the API.\n\n\n\u003cdetails\u003e\n\n\u003csummary\u003e\u003ccode\u003e\u0026lt;ContainerQuery\u0026gt;\u003c/code\u003e\u003c/summary\u003e\n\n### Arguments\n\nYou can pass these arguments to the component.\n\n| Name | Required | Description | Type |\n|--|:--:|--|--|\n| @features | Yes\u003csup\u003e1\u003c/sup\u003e | Container query definitions | POJO |\n| @dataAttributePrefix | No | Prefix for data attributes | string |\n| @debounce | No | Debounce time for resize (ms) | number ≥ 0 |\n| @tagName | No | Container tag name\u003csup\u003e2\u003c/sup\u003e | HTML tag name |\n\n\u003csup\u003e1. The component renders without error when `@features` isn't provided. In practice, you will always want to set `@features`.\u003c/sup\u003e\n\n\u003csup\u003e2. By default, the component is a `\u003cdiv\u003e` element. You can pass a valid HTML tag name to facilitate accessibility and semantic HTML.\u003c/sup\u003e\n\n### Attributes\n\nYou _may_\u003csup\u003e1\u003c/sup\u003e pass attributes to the component for these reasons:\n\n- Style (e.g. `class`, [`local-class`](https://github.com/salsify/ember-css-modules))\n- Accessibility (e.g. ARIA attributes\u003csup\u003e2\u003c/sup\u003e, roles)\n\n\u003csup\u003e1. Do refrain from overusing splattributes (e.g. pass a `{{did-insert}}` modifier to fetch data), since the component's API may change and cause unexpected results. Practice separation of concerns when possible. For example, data fetching can be handled by another element or [`@use` decorator](https://github.com/emberjs/rfcs/blob/use-and-resources/text/0567-use-and-resources.md).\u003c/sup\u003e\n\n\u003csup\u003e2. When an [ARIA attribute has multiple values](https://github.com/ijlee2/ember-container-query/issues/38#issuecomment-647017665), the order of values can matter. At the moment, splattributes doesn't guarantee the order.\u003c/sup\u003e\n\n### Output\n\nYou can consume these values in your app or addon.\n\n| Name | Yielded | Description | Type |\n|--|:--:|--|--|\n| features | Yes | Container query results | POJO |\n| dimensions | Yes | Container dimensions | POJO |\n| data-container-query-_{featureName}_ | No | Data attributes for CSS selector | HTML data attribute |\n\n\u003c/details\u003e\n\n\n\u003cdetails\u003e\n\n\u003csummary\u003e\u003ccode\u003e{{aspect-ratio}}\u003c/code\u003e, \u003ccode\u003e{{height}}\u003c/code\u003e, \u003ccode\u003e{{width}}\u003c/code\u003e\u003c/summary\u003e\n\n### Arguments\n\nAll helpers accept these arguments:\n\n| Name | Required | Description | Type |\n|--|:--:|--|--|\n| min | Yes\u003csup\u003e1\u003c/sup\u003e | Lower bound for feature\u003csup\u003e2\u003c/sup\u003e | number ≥ 0 |\n| max | Yes\u003csup\u003e1\u003c/sup\u003e | Upper bound for feature\u003csup\u003e2\u003c/sup\u003e | number ≥ 0 |\n\n\u003csup\u003e1. The helpers use default values of `min = 0` and `max = Infinity`, and assume the inequalities `min ≤ x \u003c max`. In practice, you will always want to set `min` or `max` (or both).\u003c/sup\u003e\n\n\u003csup\u003e2. Aspect ratio is unitless. Height and width have the unit of pixel.\u003c/sup\u003e\n\n\u003c/details\u003e\n\n\n\u003cdetails\u003e\n\n\u003csummary\u003e\u003ccode\u003e{{container-query}}\u003c/code\u003e\u003c/summary\u003e\n\n### Arguments\n\nYou can pass these arguments to the modifier.\n\n- `@dataAttributePrefix`\n- `@debounce`\n- `@features`\n- `@onQuery`\n\nFor more information, refer to [the arguments of `\u003cContainerQuery\u003e` component](#arguments).\n\n\n### Output\n\nThe output is similar to [those of `\u003cContainerQuery\u003e` component](#output).\n\nData attributes are automatically applied to the HTML element. To get `dimensions` and `features`, you will need to pass the argument `@onQuery` (a function) to the modifier.\n\n```ts\n/* app/components/chart.gts */\nimport { action } from '@ember/object';\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { containerQuery, type Dimensions } from 'ember-container-query';\n\nexport default class Chart extends Component {\n  @tracked height: number;\n  @tracked width: number;\n\n  @action updateDimensions({ dimensions }: { dimensions: Dimensions }) {\n    const { height, width } = dimensions;\n\n    this.height = height;\n    this.width = width;\n  }\n\n  // ...\n\n  \u003ctemplate\u003e\n    \u003cdiv {{containerQuery onQuery=this.updateDimensions}}\u003e\n      \u003csvg\u003e\u003c/svg\u003e\n    \u003c/div\u003e\n  \u003c/template\u003e\n}\n```\n\n\u003c/details\u003e\n\n\n## Compatibility\n\n- Ember.js v4.12 or above\n- Node.js v22 or above\n\n\n## Contributing\n\nSee the [Contributing](./CONTRIBUTING.md) guide for details.\n\n\n## Credits\n\nMuch thanks goes to [Chad Carbert (@chadian)](https://github.com/chadian), who introduced me to container queries at [EmberFest 2019](https://www.youtube.com/watch?v=RIdjk9_RSBY) and created [`ember-fill-up`](https://github.com/chadian/ember-fill-up) 🌟. I modeled the API for `ember-container-query` based on Chad's addon.\n\n\n## License\n\nThis project is licensed under the [MIT License](./LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fijlee2%2Fember-container-query","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fijlee2%2Fember-container-query","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fijlee2%2Fember-container-query/lists"}