{"id":18299,"library":"ember-cli-element-closest-polyfill","title":"ember-cli-element-closest-polyfill","description":"Ember CLI addon that polyfills Element.closest() and Element.matches() for browsers lacking support (IE11 and lower). Version 0.0.2 is the latest release, last updated on npm in 2019. Based on jonathantneal's element-closest polyfill. It uses Ember CLI's targets feature to conditionally include the polyfill only when needed, reducing bundle size. Differentiators: automatic inclusion based on browser targets, supports nested addon usage, and also polyfills Element.matches().","status":"active","version":"0.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/miguelcobain/ember-cli-element-closest-polyfill","tags":["javascript","ember-addon","closest","polyfill"],"install":[{"cmd":"npm install ember-cli-element-closest-polyfill","lang":"bash","label":"npm"},{"cmd":"yarn add ember-cli-element-closest-polyfill","lang":"bash","label":"yarn"},{"cmd":"pnpm add ember-cli-element-closest-polyfill","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Importing the module automatically applies the polyfill; there is no named export. Just import the package once, typically in app.js.","wrong":"import { closest } from 'ember-cli-element-closest-polyfill';","symbol":"default","correct":"import 'ember-cli-element-closest-polyfill';"},{"note":"This is an Ember CLI addon; consumption is via 'ember install' or adding to package.json. No JS import is needed manually; the addon handles the polyfill.","wrong":"import { polyfill } from 'ember-cli-element-closest-polyfill';","symbol":"addon","correct":"// In ember-cli-build.js or as addon dependency: add 'ember-cli-element-closest-polyfill' to package.json dependencies"},{"note":"After polyfill, Element.closest works per spec (one argument). No extra arguments supported.","wrong":"element.closest('.selector', context);","symbol":"Element.closest","correct":"element.closest('.selector');"}],"quickstart":{"code":"# Install the addon in your Ember app\nember install ember-cli-element-closest-polyfill\n\n# After installation, you can use element.closest() in your Ember components or controllers.\n// Example in a component:\nimport Component from '@glimmer/component';\nimport { action } from '@ember/object';\n\nexport default class MyComponent extends Component {\n  @action\n  handleClick(event) {\n    const button = event.target.closest('button');\n    if (button) {\n      console.log('Clicked a button:', button);\n    }\n  }\n}","lang":"javascript","description":"Installs the addon and shows usage of Element.closest in an Ember component after polyfill is applied."},"warnings":[{"fix":"Set your Ember CLI targets in config/targets.js to include browsers like 'ie 11' to force inclusion of the polyfill.","message":"The polyfill is auto-included based on browser targets; if you need it unconditionally (e.g., in an addon), ensure your target configuration includes older browsers.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Update Ember CLI to >=2.13 to leverage conditional polyfill inclusion.","message":"Ember CLI versions before 2.13 do not support the targets feature; the polyfill will always be included.","severity":"deprecated","affected_versions":"<0.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure your target configuration includes browsers that need the polyfill, such as 'ie 11' in config/targets.js.","cause":"Browser does not support Element.closest and polyfill is not included (e.g., targets exclude IE11).","error":"closest is undefined"},{"fix":"Run 'ember install ember-cli-element-closest-polyfill' to add it to your project.","cause":"Addon not installed or not listed in package.json dependencies.","error":"Cannot find module 'ember-cli-element-closest-polyfill'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}