-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
49 lines (37 loc) · 1.46 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
---
title: "Window: customElements property"
short-title: customElements
slug: Web/API/Window/customElements
page-type: web-api-instance-property
browser-compat: api.Window.customElements
---
{{APIRef("Web Components")}}
The **`customElements`** read-only property of the {{domxref("Window")}} interface returns a reference to the {{domxref("CustomElementRegistry")}} object, which can be used to register new [custom elements](/en-US/docs/Web/API/Web_components/Using_custom_elements) and get information about previously registered custom elements.
## Examples
The most common example you'll see of this property being used is to get access to the {{domxref("CustomElementRegistry.define()")}} method to define and register a new custom element, e.g.:
```js
let customElementRegistry = window.customElements;
customElementRegistry.define("my-custom-element", MyCustomElement);
```
However, it is usually shortened to something like the following:
```js
customElements.define(
"element-details",
class extends HTMLElement {
constructor() {
super();
const template = document.getElementById(
"element-details-template",
).content;
const shadowRoot = this.attachShadow({ mode: "open" }).appendChild(
template.cloneNode(true),
);
}
},
);
```
See our [web-components-examples](https://github.com/mdn/web-components-examples/) repo for more usage examples.
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}