From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:40:17 -0500
Subject: initial commit

---
 .../zh-cn/web/api/htmlslotelement/name/index.html  | 63 ++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 files/zh-cn/web/api/htmlslotelement/name/index.html

(limited to 'files/zh-cn/web/api/htmlslotelement/name')

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>
-- 
cgit v1.2.3-54-g00ecf