ember-cli-element-closest-polyfill

0.0.2 verified Sat Apr 25 auth: no javascript

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().

Common errors

error closest is undefined ↓

cause Browser does not support Element.closest and polyfill is not included (e.g., targets exclude IE11).

fix

Ensure your target configuration includes browsers that need the polyfill, such as 'ie 11' in config/targets.js.

error Cannot find module 'ember-cli-element-closest-polyfill' ↓

cause Addon not installed or not listed in package.json dependencies.

fix

Run 'ember install ember-cli-element-closest-polyfill' to add it to your project.

Warnings

gotcha 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. ↓

fix Set your Ember CLI targets in config/targets.js to include browsers like 'ie 11' to force inclusion of the polyfill.

deprecated Ember CLI versions before 2.13 do not support the targets feature; the polyfill will always be included. ↓

fix Update Ember CLI to >=2.13 to leverage conditional polyfill inclusion.

Install

npm install ember-cli-element-closest-polyfill

yarn add ember-cli-element-closest-polyfill

pnpm add ember-cli-element-closest-polyfill

Imports

default
wrong
```
import { closest } from 'ember-cli-element-closest-polyfill';
```
correct
```
import 'ember-cli-element-closest-polyfill';
```
Importing the module automatically applies the polyfill; there is no named export. Just import the package once, typically in app.js.

addon

wrong

import { polyfill } from 'ember-cli-element-closest-polyfill';

correct

// In ember-cli-build.js or as addon dependency: add 'ember-cli-element-closest-polyfill' to package.json dependencies

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.

Element.closest
wrong
```
element.closest('.selector', context);
```
correct
```
element.closest('.selector');
```
After polyfill, Element.closest works per spec (one argument). No extra arguments supported.

Quickstart

Installs the addon and shows usage of Element.closest in an Ember component after polyfill is applied.

# Install the addon in your Ember app
ember install ember-cli-element-closest-polyfill

# After installation, you can use element.closest() in your Ember components or controllers.
// Example in a component:
import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class MyComponent extends Component {
  @action
  handleClick(event) {
    const button = event.target.closest('button');
    if (button) {
      console.log('Clicked a button:', button);
    }
  }
}