initial commit

1 files changed, 61 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/window/customelements/index.html b/files/zh-cn/web/api/window/customelements/index.html
new file mode 100644
index 0000000000..c53e5f8b48
--- /dev/null
+++ b/files/zh-cn/web/api/window/customelements/index.html
@@ -0,0 +1,61 @@
+---
+title: Window.customElements
+slug: Web/API/Window/customElements
+tags:
+  - API
+  - CustomElementRegistry
+  - Property
+  - Reference
+  - Web Components
+  - Window
+  - custom elements
+  - customElements
+translation_of: Web/API/Window/customElements
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary"><strong><code>customElements</code></strong> 是{{domxref("Window")}}对象上的一个只读属性，接口返回一个{{domxref("CustomElementRegistry")}} 对象的引用，可用于注册新的 <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">custom elements</a>，或者获取之前定义过的自定义元素的信息。</span></p>
+
+<h2 id="例子">例子</h2>
+
+<p>这个属性最常用的例子是用来获取使用{{domxref("CustomElementRegistry.define()")}}方法定义和注册的自定义元素，例如：</p>
+
+<pre class="brush: js">let customElementRegistry = window.customElements;
+customElementRegistry.define('my-custom-element', MyCustomElement);</pre>
+
+<p>However, it is usually shortened to something like the following:</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="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</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="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{Compat("api.Window.customElements")}}</p>