coderef

Autonomous custom elementsBaseline · Widely available

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

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Jan 15, 2020. Widely available since Jul 15, 2022.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–53Not supported
54+Supportedsince Oct 12, 2016
Current: 155
Edge
12–18Not supported
79+Supportedsince Jan 15, 2020
Current: 154
Firefox
1–62Not supported
63+Supportedsince Oct 23, 2018
Current: 157
Safari
1–10Not supported
10.1+Supportedsince Mar 27, 2017
Current: 27
MobileChrome Android
18–53Not supported
54+Supportedsince Oct 19, 2016
Current: 155
Firefox Android
4–62Not supported
63+Supportedsince Oct 23, 2018
Current: 157
Safari iOS
1–10Not supported
10.3+Supportedsince Mar 27, 2017
Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

Full syntax and examples are on MDN: CustomElementRegistry.

Feature detection

JS · check before using
if ("CustomElementRegistry" in globalThis) {
  // CustomElementRegistry is available
} else {
  // load a polyfill or use a fallback
}

Documentation (MDN)

Specification

Sub-features

Support for each part of the feature (9). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
CustomElementRegistry54796310.1546310.3
CustomElementRegistry.define54796310.1546310.3
CustomElementRegistry.define.disabledFeatures_static_property777992✕7792✕
CustomElementRegistry.get547963✕5463✕
CustomElementRegistry.getName117117116✕117116✕
CustomElementRegistry.upgrade68796312.1686312.2
CustomElementRegistry.whenDefined54796310.1546310.3
Window.customElements54796310.1546310.3
defined54796310546310