blob: b00202e056487855ec490637de2c574a5a58405d (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
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>
|
