https://github.com/github/babel-plugin-transform-custom-element-classes

Compile ES6 HTMLElement class extensions to ES5
https://github.com/github/babel-plugin-transform-custom-element-classes

Last synced: about 2 months ago
JSON representation

Compile ES6 HTMLElement class extensions to ES5

• Host: GitHub
• URL: https://github.com/github/babel-plugin-transform-custom-element-classes
• Owner: github
• License: mit
• Archived: true
• Created: 2016-11-23T02:40:20.000Z (over 9 years ago)
• Default Branch: main
• Last Pushed: 2020-08-03T15:03:34.000Z (over 5 years ago)
• Last Synced: 2025-10-04T07:32:45.990Z (5 months ago)
• Language: JavaScript
• Size: 15.6 KB
• Stars: 87
• Watchers: 3
• Forks: 12
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# babel-plugin-transform-custom-element-classes

Compile Custom Element classes that extend `HTMLElement` for ES5 environments.

### Problem

Custom Elements were designed for native ES6 classes that can extend host objects in ways prototypical inheritance can not. Using the Babel `transform-es2015-classes` transform will not work as is. You'll likely see a runtime error like `"Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function."` when attempting to extend `HTMLElement` in a Babel transpiled class.

### Solution

A workaround is to use `Reflect.construct` to build a new `HTMLElement` instance expected by the constructor. This transform wraps any ES6 classes extending `HTMLElement` with an intermediary class that shims this behavior.

## Compatibility

![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![IE](https://raw.githubusercontent.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | ![Opera](https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png)

--- | --- | --- | --- | --- |

Latest ✅ | ❌ | ❌ | ❌ | 10.1+ TP ✅ |

### With [Custom Elements V1 polyfill](https://github.com/webcomponents/custom-elements)

![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![IE](https://raw.githubusercontent.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | ![Opera](https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png)

--- | --- | --- | --- | --- |

Latest ✅ | Latest ✅ | 11 ✅ | Latest ✅ | 9.1+ ✅ |

## Installation

```sh

$ npm install babel-plugin-transform-custom-element-classes

```

## Usage

### Via `.babelrc`

**.babelrc**

```js

// include before transform-es2015-classes

{

  "plugins": [

    "transform-custom-element-classes",

    "transform-es2015-classes"

  ]

}

```