chrome下shadow dom内overflow: auto容器滚动失灵，因wheel事件被跳过shadow boundary直接派发给外层可滚动祖先；需在shadowroot内监听wheel并preventdefault，配合contain: strict和delegatesfocus:true解决。
Chrome 下 Shadow DOM 内部的 overflow: auto 容器滚动失灵，不是组件写错了，而是浏览器默认把 wheel 事件派发给了外层可滚动祖先——根本没进你的 shadowRoot。
为什么 Shadow DOM 内的 wheel 事件不触发滚动
Chrome（Chromium 115+）的滚动链机制会跳过 Shadow Boundary，直接向上查找第一个可滚动容器（比如 document.body 或 #app）。即使你鼠标精确悬停在 .scroll-container 上，只要它在 shadowRoot 里，且外层有滚动能力，wheel 就不会落到它身上。
验证方式：DevTools → Settings → 勾选 Show user agent shadow DOM，再检查目标元素是否真有 overflow: auto 和足够内容高度；用 getComputedStyle(el).overflow 确认值不是 visible。
- Firefox/Safari 通常正常，这是 Chromium 特有行为
-
pointerenter或focus不会自动激活滚动目标 - 仅靠
scrollbar-gutter: stable或临时设body{ overflow: hidden }是副作用修复，易引发布局抖动和焦点丢失
必须在 shadowRoot 内主动监听并 preventDefault
核心动作就两步：监听 wheel、调用 e.preventDefault()、再手动更新 scrollTop。不能只加 CSS，也不能在外层 document 监听后转发——跨 boundary 派发 wheel 成本高，且不可靠。
示例代码（在组件挂载后执行）：
const scrollable = this.shadowRoot.querySelector('.scroll-container');
if (scrollable) {
scrollable.addEventListener('wheel', (e) => {
e.preventDefault();
scrollable.scrollTop += e.deltaY * 1.2;
}, { passive: false });
}
- 必须传
{ passive: false }，否则preventDefault()在 Chrome 中会被忽略 -
deltaY * 1.2是手感调节系数，可根据设备微调；如需惯性滚动，改用scrollBy({ top: e.deltaY, behavior: 'smooth' }) - 避免在 handler 中读取
scrollable.scrollHeight或offsetHeight，这会强制同步 layout
配合 contain: strict 防止重绘外溢
光解决 wheel 还不够。如果滚动容器内部节点频繁增删或样式动态变化，浏览器仍可能触发全局重排。关键是在 shadowRoot 的根容器上加 CSS containment：
/* 在 shadowRoot 内部的 <style> 中 */
:host > .container {
contain: strict;
}
</style>
-
contain: strict明确告诉浏览器：“这个区域的 layout、paint、style 全部由我负责”，避免滚动时样式计算扩散到 light DOM - 不要只写
contain: paint—— 它不阻止 layout 计算，对滚动性能提升有限 - 若容器内含
<slot></slot>，确保插槽内容变更后不引发整块重绘；必要时监听slotchange并用requestIdleCallback延后处理
delegatesFocus 和滚动体验强相关
用户点击组件空白区想滚动，却意外触发了 tab 导航或焦点跳转？那很可能 delegatesFocus: true 没启用，导致点击行为被解释为“聚焦宿主”，而非“准备滚动”。
- 必须在
attachShadow({ mode: 'open', delegatesFocus: true })时声明，后期赋值无效 - 确保 shadow 内有且仅有一个自然可聚焦元素（如未禁用的
<input>），否则浏览器可能把焦点委托给按钮而非滚动容器，干扰操作流 - 宿主元素需监听内部元素的
focus/blur并设置focused属性，用:host([focused])控制视觉反馈，避免用户困惑“我到底点中没”
真正卡顿的从来不是 Shadow DOM 本身，而是你把它当透明容器用——没阻断滚动链、没约束重排范围、没对齐焦点语义。三个动作缺一不可：接管 wheel、锁住 contain、对齐 delegatesFocus。
