---
title: Window.customElements
slug: Web/API/Window/customElements
tags:
  - API
  - Property
  - Reference
  - Web Components
  - Window
translation_of: Web/API/Window/customElements
---
<div>{{APIRef}}</div>

<p><span class="seoSummary">{{domxref("Window")}} 인터페이스의 <strong><code>customElements</code></strong> 읽기 전용 속성은 새로운 사용자 지정 요소를 등록하거나, 이전에 등록한 요소의 정보를 받아올 수 있는 {{domxref("CustomElementRegistry")}} 객체의 참조를 반환합니다.</span></p>

<h2 id="Examples" name="Examples">예제</h2>

<p><code>customElements</code>를 사용하는 가장 흔한 예시는 새로운 요소를 정의하고 등록하기 위해 {{domxref("CustomElementRegistry.define()")}} 메서드에 적용하는 경우입니다.</p>

<pre class="brush: js">let customElementRegistry = window.customElements;
customElementRegistry.define('my-custom-element', MyCustomElement);</pre>

<p>그러나, 보통은 다음 코드처럼 줄여서 사용하곤 합니다.</p>

<pre class="brush: 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));
    }
  }
);</pre>

<p><a href="https://github.com/mdn/web-components-examples/">web-components-examples</a> 저장소에서 더 많은 사용 예제를 찾아보세요.</p>

<h2 id="Specification" name="Specification">명세</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName("HTML WHATWG", "custom-elements.html#dom-window-customelements", "window.customElements")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">브라우저 호환성</h2>

<div>


<p>{{Compat("api.Window.customElements")}}</p>
</div>