---
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>