1 files changed, 63 insertions, 0 deletions
diff --git a/files/ko/web/api/window/customelements/index.html b/files/ko/web/api/window/customelements/index.html
new file mode 100644
index 0000000000..591cd5bf65
--- /dev/null
+++ b/files/ko/web/api/window/customelements/index.html
@@ -0,0 +1,63 @@
+---
+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>