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

Custom Elements are defined in the following specification:

Specification Status Comment
The HTML Standard: CustomElementRegistry.define() LS  
Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support No support 59.0 No support 47.0 10.1
Customized built-in elements No support 59.0 No support 47.0 No support
Feature Firefox Mobile (Gecko) Chrome for Android IE Mobile Opera Mobile Safari Mobile
Basic support No support 56.0 No support 47.0 10.1
Customized built-in elements No support 56.0 No support 47.0 No support

Document Tags and Contributors

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