在 Shadow DOM 中，事件冒泡时 this 不会自动重定向到宿主元素，仍指向实际目标节点；事件重定向仅影响 event.target，不影响 this 或 currentTarget，后者始终指向监听器绑定的元素。
在 Shadow DOM 中，事件冒泡时 this 的指向**不会自动重定向到宿主元素**；它仍指向触发事件的**实际目标节点**（比如 shadow 内部的按钮），除非你显式干预。所谓“重定向”其实是对事件对象的 target 和 currentTarget 属性的处理，而非改变 this 本身——因为普通事件监听器中的 this 默认绑定取决于调用方式（如 addEventListener 下默认是 currentTarget），而并非被“重定向”的对象。
理解 Shadow DOM 中的事件重定向行为
Shadow DOM 规范定义了“事件重定向（Event Retargeting）”：当事件从 shadow 树冒泡到 light DOM 时，其 event.target 会被自动修改为宿主元素（host），以保持封装性。但这个重定向只影响 target，不影响 this 或 currentTarget：
-
event.target：在 light DOM 监听器中，通常指向宿主（已重定向）；在 shadow 内监听器中，仍指向内部真实目标。 -
event.currentTarget：始终指向当前监听器所绑定的元素（即谁在addEventListener上注册了该回调）。 -
this：在普通函数监听器中，等价于currentTarget；在箭头函数中则继承外层作用域，不绑定 DOM 元素。
在宿主上监听并获取宿主引用
最直接的方式是在宿主元素上添加事件监听器。此时 this 和 currentTarget 自然就是宿主：
class MyElement extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `<button>Click me</button>`;
// ✅ 在宿主上监听 —— this 就是宿主
this.addEventListener('click', function(e) {
console.log(this === e.currentTarget); // true
console.log(this instanceof MyElement); // true
console.log(e.target); // 可能是 button（未重定向）或 host（已冒泡重定向，取决于是否在 light DOM）
});
}
}
在 shadow 内监听并手动访问宿主
若必须在 shadow 内部处理事件（例如封装逻辑），又想操作宿主，可通过 event.composedPath()[0] 或 event.target.getRootNode().host 获取宿主：
立即学习“Java免费学习笔记（深入）”；
-
event.composedPath()返回冒泡路径数组，首项是原始触发目标，末项通常是宿主（对composed: true事件）。 -
event.target.getRootNode().host在 shadow 内部调用时，可拿到当前 shadow 的宿主（前提是event.target在该 shadow 中）。
示例：
this.shadowRoot.querySelector('button').addEventListener('click', (e) => {
const host = e.target.getRootNode().host;
console.log(host === this); // true（this 指向自定义元素实例）
// 此处可安全调用宿主方法或更新属性
});
避免依赖 this 绑定，优先使用显式引用
由于 this 在事件处理器中易受绑定方式影响（如箭头函数、bind、类方法自动绑定等），更健壮的做法是：
- 在类中使用箭头函数属性（确保
this指向实例）； - 或在监听器内直接用
self/that缓存宿主引用； - 或统一通过
e.currentTarget（如果监听器绑在宿主上）或getRootNode().host（如果在 shadow 内）获取宿主。
例如：
class MyElement extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `<button>Click</button>`;
const button = this.shadowRoot.querySelector('button');
// 使用箭头函数，this 始终是自定义元素实例
button.addEventListener('click', () => this.handleClick());
}
handleClick() {
console.log('Handled on host:', this);
}
} 
