initial commit

2 files changed, 166 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/htmlslotelement/index.html b/files/zh-cn/web/api/htmlslotelement/index.html
new file mode 100644
index 0000000000..6393babe39
--- /dev/null
+++ b/files/zh-cn/web/api/htmlslotelement/index.html
@@ -0,0 +1,103 @@
+---
+title: HTMLSlotElement
+slug: Web/API/HTMLSlotElement
+translation_of: Web/API/HTMLSlotElement
+---
+<p>{{SeeCompatTable}}{{APIRef('Web Components')}}</p>
+
+<p><a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM API</a> 的接口HTMLSlotElement使其能够访问到HTML元素&lt;slot&gt;的名字和分配的节点</p>
+
+<p>
+ </p><h2 id="属性">属性</h2>
+<p></p>
+
+<dl>
+ <dt>{{domxref('HTMLSlotElement.name')}}</dt>
+ <dd>{{domxref("DOMString")}}: 可以用来设置和获取slot的名字</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{domxref('HTMLSlotElement.assignedNodes()')}}</dt>
+ <dd>Returns the sequence of elements assigned to this slot, or alternatively the slot's fallback content.</dd>
+ <dt>
+ <h2 id="规范">规范</h2>
+ </dt>
+</dl>
+
+<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','scripting.html#htmlslotelement','HTMLSlotElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Shadow DOM','#the-slot-element','HTMLSlotElement')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器的兼容性">浏览器的兼容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(53.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(53.0)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(53.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-cn/web/api/htmlslotelement/name/index.html b/files/zh-cn/web/api/htmlslotelement/name/index.html
new file mode 100644
index 0000000000..b00202e056
--- /dev/null
+++ b/files/zh-cn/web/api/htmlslotelement/name/index.html
@@ -0,0 +1,63 @@
+---
+title: HTMLSlotElement.name
+slug: Web/API/HTMLSlotElement/name
+tags:
+  - name
+  - 名称
+  - 属性
+  - 影子DOM
+  - 插槽
+translation_of: Web/API/HTMLSlotElement/name
+---
+<p>{{APIRef("Shadow DOM API")}}</p>
+
+<p> 元素{{domxref("HTMLSlotElement")}}的<strong>name</strong>属性， 可以获取和设置属性值. 插槽提供了web组件的摆放位置，辅助用户布局。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <em>name</em> = <em>htmlSlotElement</em>.name
+<em>htmlSlotElement</em>.name = <em>name</em>
+</pre>
+
+<h3 id="值">值</h3>
+
+<p>一个 {{domxref('DOMString')}}.</p>
+
+<h2 id="例子">例子</h2>
+
+<p>下面的片段来自 <a href="https://github.com/mdn/web-components-examples/tree/master/slotchange">slotchange example</a> (<a href="https://mdn.github.io/web-components-examples/slotchange/">see it live also</a>).</p>
+
+<pre class="brush: js">let slots = this.shadowRoot.querySelectorAll('slot');
+slots[1].addEventListener('slotchange', function(e) {
+  let nodes = slots[1].assignedNodes();
+  console.log('Element in Slot "' + slots[1].name + '" changed to "' + nodes[0].outerHTML + '".');
+});</pre>
+
+<p>这里我们获取所有插槽的引用, 然后给模板里的第二个插槽增加事件— 跟踪内容变化.</p>
+
+<p>每当附加在插槽中的内容变化, 我们都记录插槽相关的内容.</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','#dom-slot-name','name')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLSlotElement.name")}}</p>
+</div>