在Web组件（Custom Elements）与Shadow DOM技术日益普及的今天，不少开发者遇到了一个令人困惑的现象：明明为页面编写了全局CSS规则，自定义元素（Custom Element）却“视而不见”，更令人费解的是，当点击该元素时，事件目标（event.target）返回的并非元素本身，而是其父节点。这究竟是浏览器特性还是开发陷阱？本文将从Shadow DOM的样式隔离机制与事件重定向逻辑出发，揭开这一现象背后的技术真相。
一、样式隔离：Shadow DOM的“保护罩”
自定义元素之所以能“忽略”主CSS样式，根源在于它可能使用了Shadow DOM。Shadow DOM是Web组件规范的核心部分，它允许开发者将一个隐藏的、独立的DOM子树附加到元素上，这个子树拥有自己的样式作用域。当自定义元素内部存在<template>或通过attachShadow({mode: 'open'})创建影子根节点（shadow root）时，外部全局CSS选择器（如div { color: red }）无法穿透影子边界作用到影子内部元素，除非使用::part()或CSS自定义属性（CSS Variables）显式穿透。
这种设计初衷是为了组件封装：避免全局样式意外污染组件样式，同时也防止组件内部样式影响外部。但副作用明显——开发者编写的全局CSS规则似乎“失效”。若自定义元素本身未开放样式自定义（如未定义CSS自定义属性），外部样式便无法生效。
二、事件重定向：保护Shadow DOM边界的“防火墙”
更令人困惑的是事件目标行为。当用户与Shadow DOM内部的元素交互（如点击）时，浏览器会自动执行事件重定向（Event Retargeting）：将event.target调整为触发事件的Shadow DOM主机（即自定义元素本身），而不是内部的子元素。例如，若自定义元素<my-button>内部包含一个<span>，点击该<span>时，event.target返回的是<my-button>而不是<span>。这一机制在DOM规范中明确说明，目的是防止外部脚本探查到组件内部的结构细节。
但若自定义元素本身没有Shadow DOM，而仅仅是普通的自定义元素（未附加shadow root），则不会发生事件重定向。此时事件目标通常是实际触发的子元素。因此，当开发者发现事件目标返回父节点时，几乎可以断定该自定义元素使用了Shadow DOM，且父节点正是该元素的影子主机。
三、常见陷阱：混合使用Light DOM与Shadow DOM
部分开发者会将自定义元素的部分内容放在“轻量DOM”（Light DOM，即元素的子节点）中，同时又使用Shadow DOM封装其他部分。此时事件冒泡路径会变得复杂：Light DOM中的子节点被分配（slot）到Shadow DOM的插槽（slot）中，事件目标会根据插槽作用域进行调整。如果未正确处理，会导致事件目标指向父节点或主机本身。
四、解决方案与最佳实践
-
样式穿透：若需外部样式影响Shadow DOM内部，可在自定义元素内部通过CSS自定义属性（如
--button-color）暴露可定制的样式点，外部通过--button-color: red覆盖。另一种方式是使用::part()伪元素（需组件支持）。 -
事件处理：若需获取实际触发事件的内部元素，可在Shadow DOM内部绑定事件，并通过
composedPath()方法获取原始路径，该数组包含影子边界内的所有节点，无视事件重定向。 -
架构决策：若无需样式隔离与封装，可考虑不使用Shadow DOM，仅使用普通自定义元素（继承
HTMLElement），此时外部样式和事件行为与普通DOM元素一致。
结语
自定义元素“无视主CSS样式”与“事件目标返回父节点”并非浏览器Bug，而是Web组件规范设计的必然结果。理解Shadow DOM的样式隔离与事件重定向机制，是高效使用自定义元素的关键。对于追求组件复用与封装的项目，推荐遵循规范；而对于需要高度可定制性的场景，则应权衡是否开启Shadow DOM。掌握这些核心原理，才能在复杂的组件生态中游刃有余。