CustomElementRegistry.define()

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

Document Tags and Contributors

 Contributors to this page: cPhost, chrisdavidmills, arthurevans
 Last updated by: cPhost,