The define() method of the CustomElementRegistry interface defines a new custom element.
This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
Syntax
customElements.define(name, constructor, options);
Parameters
- name
- Name for the new custom element.
- constructor
- Constructor for the new custom element.
- options Optional
- Object that controls how the element is defined. One option is currently supported:
extends. String specifying the name of a built-in element to extend. Used to create a customized built-in element.
Return value
Void.
Examples
class BasicElement extends HTMLElement {
connectedCallback() {
this.textContent = 'Just a basic custom element.';
}
}
customElements.define('basic-element', BasicElement);
<basic-element><basic-element>
Browser compatibility
| Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | No support | 54 | No support | 41 | WebKit nightly |
| Customized built-in elements | No support | 54 | No support | 41 | No support |
| Feature | Firefox Mobile (Gecko) | Chrome for Android | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | No support | 54 | No support | 41 | No support |
| Customized built-in elements | No support | 54 | No support | 41 | No support |