在 shadow dom 中，`composed: true` 选项允许事件穿透宿主元素（host）进入文档的常规 dom 树，而 `composed: false` 则会将事件限制在 shadow dom 内部。默认情况下，大多数原生事件（如 click、input）的 composed 为 true，但部分自定义事件或特定属性设置为 false 时会被拦截。要控制这一行为，需在创建 customevent 时显式设置 composed 属性。
如何创建一个能穿透 Shadow DOM 的自定义事件
通过实例化 CustomEvent 并设置 { composed: true }，可以确保该事件从 Shadow DOM 内部触发后，能够继续向上传播到 Document 层级。这是实现组件间通信的关键机制。
const shadowRoot = document.getElementById('my-element').attachShadow({ mode: 'open' });
shadowRoot.innerHTML = '<button id="btn">Click Me</button>';
const btn = shadowRoot.getElementById('btn');
btn.addEventListener('click', (e) => {
const customEvent = new CustomEvent('my-custom-event', {
bubbles: true,
composed: true // 关键：允许穿透 Shadow Boundary
});
btn.dispatchEvent(customEvent);
});
// 外部监听器
window.addEventListener('my-custom-event', (e) => {
console.log('Event received outside Shadow DOM:', e.target); // 输出 button
});
运行上述代码后，点击按钮会在控制台打印出事件目标。由于设置了 composed: true，事件成功穿过了 Shadow Boundary。如果将 composed 改为 false，外部监听器将无法收到该事件。
为什么某些原生事件默认不穿透 Shadow DOM
虽然 click 等常见事件默认 composed 为 true，但像 focus、blur 或部分动画相关事件可能受限于浏览器规范或具体实现，导致其传播行为不同。理解这一点有助于排查为何某些事件在组件外部未被捕获。
// 对比测试：focus 事件通常不冒泡且 composed 为 false
const input = shadowRoot.querySelector('input');
input.addEventListener('focus', () => {
const focusEvent = new CustomEvent('custom-focus', {
bubbles: true,
composed: false // 默认行为类似，被限制在 Shadow DOM 内
});
input.dispatchEvent(focusEvent);
});
window.addEventListener('custom-focus', (e) => {
console.log('This will NOT log because composed is false');
});
在此示例中，即使手动 dispatch 了一个名为 custom-focus 的事件，由于 composed 设为 false，它不会到达 window。这验证了 composed 选项对事件传播范围的严格控制作用。
当 Shadow DOM 内部元素触发事件时，event.target 指向哪里
无论 composed 是 true 还是 false，event.target 始终指向触发事件的原始元素（即 Shadow DOM 内部的元素）。这与 event.composedPath() 的行为一致，后者返回完整的事件路径，包括 Shadow DOM 内部的节点。开发者应利用 composedPath() 来准确识别事件源，而不是依赖 target 在跨边界后的表现。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
