slotchange
event is fired on an
HTMLSlotElement
instance (
<slot>
element) when the node(s) contained in that slot change.
注意：
the
slotchange
event doesn't fire if the children of a slotted node change — only if you change (e.g. add or delete) the actual nodes themselves.
| 冒泡 | Yes |
|---|---|
| 可取消 | No |
| 接口 |
事件
|
| 事件处理程序特性 | None |
In order to trigger a
slotchange
event, one has to set or remove the
slot
属性。
element.setAttribute('slot', slotName);
// element.assignedSlot = $slot
element.removeAttribute('slot');
// element.assignedSlot = null
The following snippet is taken from our slotchange example ( see it live also ).
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 + '".');
});
Here we grab references to all the
<slot>
s, then add a
slotchange
event listener to the template's second slot — which is the one which has its contents changed in the example.
Every time the element inserted in the slot changes, we log a report to the console saying which slot has changed, and what the new node inside the slot is.
| 规范 | 状态 | 注释 |
|---|---|---|
|
DOM
The definition of '"Mutation observers" and slotchange event' in that specification. |
实时标准 | 初始定义 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
slotchange
event
|
Chrome 53 | Edge 79 |
Firefox
63
|
IE No | Opera 40 | Safari 10.1 | WebView Android 53 | Chrome Android 53 |
Firefox Android
63
|
Opera Android 41 | Safari iOS 10.3 | Samsung Internet Android 6.0 |
完整支持
不支持
实验。期望将来行为有所改变。
用户必须明确启用此特征。
HTMLSlotElement
slotchange