Shadow DOM 中用 document.createElement('tr') 错误，因节点属全局 document，应使用 shadowRoot.ownerDocument.createElement('tr')；slot 不能直塞 tbody，需显式命名并手动插入；adoptNode 会丢失事件和 CSS 变量，应深克隆重绑定。
Shadow DOM 里用 document.createElement 创建表格行会失效？
直接在 Shadow Root 中调用 document.createElement('tr') 是错的——document 指向的是全局 document，生成的节点不属于 Shadow DOM，后续 append 到 shadowRoot 时可能触发重排或丢失样式作用域。
正确做法是用 Shadow Root 所属的 ownerDocument 创建元素：
const tr = shadowRoot.ownerDocument.createElement('tr');- 或者更稳妥地复用
shadowRoot的上下文：const tr = shadowRoot.ownerDocument.createElementNS('http://www.w3.org/1999/xhtml', 'tr');（尤其在 XML/HTML 混合环境） - 避免用字符串模板拼接
innerHTML，它会绕过 Shadow DOM 的样式隔离，且无法绑定事件委托
如何让 slot 与 table 标签共存而不破坏语义？
原生 table 对子元素类型极其敏感：tbody 只接受 tr，tr 只接受 td/th。若把 <slot> 直接塞进 tbody，浏览器会自动“修复” DOM，把 slot 内容移到 table 外，导致 Shadow DOM 隔离失效。
解决方案是用 slot="row" + slot="cell" 显式声明插槽，并在 JS 中手动克隆、归类、插入：
- 给外部传入的
<tr slot="row"><td slot="cell">...加属性约束 - 在
connectedCallback中遍历this.querySelectorAll('[slot="row"]')，逐个appendChild到tbody - 禁用
tbody的默认插槽，改用<slot name="row" hidden></slot>占位但不渲染，防止浏览器自动纠错
adoptNode 能否跨 Shadow DOM 移动已有表格节点？
不能。调用 document.adoptNode() 后节点虽可被移入 Shadow Root，但会丢失所有事件监听器（包括委托在父级上的），且 CSS 自定义属性（--cell-padding）在新上下文中可能未继承。
更可靠的方式是深克隆 + 重绑定：
- 用
node.cloneNode(true)获取副本 - 对每个
td/tr手动添加class或data-role，用于后续样式和行为控制 - 事件统一委托到
shadowRoot.querySelector('tbody')，监听click时通过e.target.closest('td')定位目标 - 注意：克隆后
id属性会重复，需清空或重写，否则影响label[for]关联
虚拟滚动和 Shadow DOM 结合时，scrollHeight 计算为何不准？
Shadow DOM 中的 scrollHeight 返回的是 Shadow Root 内部容器的高度，但若表格行使用 display: contents 或 visibility: hidden 做隐藏，它们仍参与布局计算，导致值虚高。
实际应基于真实渲染行数估算：
- 用
getBoundingClientRect()测量单行平均高度（避开首尾可能带 padding/border 的异常行） - 维护一个
renderedRowCount状态，只统计当前display: table-row的tr元素数量 - 滚动监听中用
scrollTop / averageRowHeight推算可视区起始索引，而非依赖scrollHeight - 避免在 Shadow DOM 中对
table设置height: 0或overflow: hidden，这会干扰滚动尺寸测量
Shadow DOM 封装表格真正的难点不在结构，而在 DOM 语义约束与浏览器修复机制的博弈。稍不注意，就会让封装变成“假隔离”——看着独立，实则被全局样式或解析规则穿透。动手前先确认你的表格是否真需要 Shadow DOM：如果只是样式隔离，:host + CSS @layer 可能更轻量；如果涉及第三方内容注入或强封装需求，才值得投入这些细节处理。
