Widely availableSupported across all major browsers. Safe to use in production.
Web Components Widely available

Autonomous custom elements

Autonomous custom elements are HTML elements with a hyphenated tag name (like <example-element>) that have behaviors you define.

Web Components

Overview

Autonomous custom elements are HTML elements with a hyphenated tag name (like <example-element>) that have behaviors you define.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:defined
54
79
63
10
54
10
DOM API
CustomElementRegistry

The CustomElementRegistry interface provides methods for registering custom elements and querying registered elements. To get an instance of it, use the window.customElements property. To create a scoped registry, use the CustomElementRegistry.CustomElementRegistry() constructor.
54
79
63
10.1
54
10.3
define

The define() method of the CustomElementRegistry interface adds a definition for a custom element to the custom element registry, mapping its name to the constructor which will be used to create it.
54
79
63
10.1
54
10.3
define (disabledFeatures static property)

Supports `disabledFeatures` static property
77
79
92
77
get

The get() method of the CustomElementRegistry interface returns the constructor for a previously-defined custom element.
54
79
63
10.1
54
10.3
getName

The getName() method of the CustomElementRegistry interface returns the name for a previously-defined custom element.
117
117
116
17
117
17
upgrade

The upgrade() method of the CustomElementRegistry interface upgrades all shadow-containing custom elements in a Node subtree, even before they are connected to the main document.
68
79
63
12.1
68
12.2
whenDefined

The whenDefined() method of the CustomElementRegistry interface returns a Promise that resolves when the named element is defined.
54
79
63
10.1
54
10.3
customElements

The customElements read-only property of the Window interface returns a reference to the global CustomElementRegistry object, which can be used to register new custom elements and get information about previously registered custom elements.
54
79
63
10.1
54
10.3
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Supports 'Autonomous custom elements' but not 'Customized built-in elements'. See bug 182671.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Supports 'Autonomous custom elements' but not 'Customized built-in elements'. See bug 182671.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Supports 'Autonomous custom elements' but not 'Customized built-in elements'.
Notes 2 item(s)
Limitation
  • This browser only partially implements this feature
Implementation note
  • Supports 'Autonomous custom elements' but not 'Customized built-in elements'.

Syntax

HTML 
class MyCard extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<div class="card">${this.getAttribute('title')}</div>`;
  }
}
customElements.define('my-card', MyCard);

Live demo

basic customelement

CSS basic customelement demo.

PreviewFullscreen

Attribute. watch

CSS Attribute. watch demo.

PreviewFullscreen

raifusaikl

CSS raifusaikl demo.

PreviewFullscreen

Use cases

  • Using Autonomous custom elements

    Autonomous custom elements are HTML elements with a hyphenated tag name (like <example-element>) that have behaviors you define.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features