能否跨Shadow DOM边界传递回调？全局作用域是否共享？

1. 能否通过事件传递回调？ #

可以。浏览器自定义事件允许通过detail属性携带任意JavaScript值，包括函数引用。只要触发事件时将回调放入detail，并配置事件的composed: true（让事件能穿透Shadow DOM边界到达主DOM），主DOM的事件监听器就能获取到这个回调并调用。

示例代码：

// Shadow DOM内部组件脚本
const shadowCallback = (response) => {
  console.log(`Shadow DOM收到主DOM响应：${response}`);
};
// 触发自定义事件，携带回调
this.dispatchEvent(new CustomEvent('shadow-component-ready', {
  bubbles: true,
  composed: true,
  detail: { notify: shadowCallback }
}));

// 主DOM脚本
document.addEventListener('shadow-component-ready', (e) => {
  // 调用Shadow DOM传递过来的回调
  e.detail.notify('主DOM已接收到组件就绪事件');
});

2. Shadow DOM内的脚本会污染主DOM全局命名空间吗？ #

大概率不会。Shadow DOM的脚本默认运行在独立作用域中，除非开发者主动将变量挂载到window对象（全局作用域），否则内部定义的函数、变量都不会泄漏到主DOM的全局命名空间中。

比如Shadow DOM内的局部代码：

// Shadow DOM内部脚本
const internalFn = () => { /* 组件内部逻辑 */ };
class ShadowComponent extends HTMLElement { /* ... */ }

这些代码的作用域被限制在Shadow组件内部，不会影响主DOM的全局环境。只有当开发者刻意执行window.internalFn = internalFn这类操作时，才会造成全局命名空间污染——但这属于人为不当编码，并非Shadow DOM本身的特性导致。

内容的提问来源于stack exchange，提问作者Sparky