你的前端框架要被 Web 组件取代了(10)

使用 JavaScript 中的 slot你可以通过检查已分配给某个 slot 的节点、已分配给某个元素的 slot 以及 slotchange 事件来通过 JavaScript 与 slot 交互。
要找出哪些元素已分配给某个 slot，可以调用 slot.assignedNodes()。如果你还想检索任何后备内容，可以调用 slot.assignedNodes({flatten：true})。
要找出一个元素已分配给哪个元素的哪个 slot，可以检查 element.assignedSlot。
只要 slot 中的节点发生更改（即添加或删除节点时），就会触发 slotchange 事件。注意事件仅针对 slot 节点本身触发，而不针对这些 slot 节点的子节点触发。

slot.addEventListener('slotchange', e => { const changedSlot = e.target; console.log(changedSlot.assignedNodes());});
首次初始化元素时，Chrome 会触发 slotchange 事件，而 Safari 和 Firefox 则不会。
Shadow DOM 中的事件来自鼠标和键盘事件等自定义元素的标准事件默认会从 Shadow DOM 中弹出来。每当一个事件从 Shadow DOM 中的一个节点出来时，它将被重新定位，使得该事件看起来似乎是来自自定义元素本身。如果要查找事件实际来自 Shadow DOM 中的哪个元素，可以调用 event.composedPath() 来检索事件所经过的节点数组。但是，事件的 target 属性将始终指向自定义元素本身。
你可以使用 CustomEvent 从自定义元素中抛出所需的任何事件。
class MyElement extends HTMLElement { ... connectedCallback() { this.dispatchEvent(new CustomEvent('custom', { detail: {message: 'a custom event'} })); }} // on the outsidedocument.querySelector('my-element').addEventListener('custom', e => console.log('message from event:', e.detail.message));
但是，当从 Shadow DOM 内的节点而不是自定义元素本身抛出一个事件时，除非它使用 composition：true 创建，否则它不会从 Shadow DOM 中弹出。