HTML模板本身不提供样式隔离能力，必须配合attachShadow({mode:'open'})将克隆的template.content挂载到Shadow DOM中，才能实现表格样式的真正隔离；<template>仅是惰性容器，内部<style>不解析，移出后即暴露于全局样式下。
HTML表格本身不带样式隔离能力，哪怕你用 <template> 包着它、再塞进自定义元素里，只要没挂到 Shadow DOM 上，照样会被全局 CSS 覆盖或污染。
为什么 <table> 放在 <template> 里也不隔离
很多人以为把表格结构写进 <template id="my-table"> 就算“封装好了”，其实只是延迟解析——<template> 内部的 <style> 根本不会生效，外部样式依然能命中 tr、td 这些原生标签。浏览器根本不认“模板里的样式是私有的”这回事。
-
<template>是惰性容器，不参与渲染流程，内部<style>不会被解析，也不会注入文档作用域 - 一旦你用
cloneNode(true)把内容移出来，它就变成普通 DOM，立刻暴露在全局样式之下 - 哪怕加了
class="my-table"，也挡不住table tr { height: 40px; }这种宽泛选择器
必须用 attachShadow() 才能让表格真正隔离
只有把表格结构挂进 Shadow Root，它的样式才真正“关起门来过日子”。关键不是怎么写 <table>，而是怎么把它塞进去。
- 必须调用
this.attachShadow({ mode: 'open' })（调试时别用'closed'，否则 DevTools 看不见节点） - 必须用
template.content.cloneNode(true)，直接appendChild(template.content)会导致第二次渲染时内容为空 -
<style>标签要写在<template>内部，随 content 一起克隆进去，才能作用于 Shadow DOM 中的table、th、td - 避免用
!important，Shadow DOM 里优先级天然高，靠 specificity 就够了
<slot> 带入表格数据时的样式穿透风险
如果让使用者通过 <slot> 注入 <tr> 或 <td>，那这些节点实际在 light DOM，外部样式仍可能影响它们——这是最容易被忽略的漏点。
立即学习“前端免费学习笔记（深入）”；
- Slot 内容默认继承 light DOM 样式，
font-family、color等可继承属性会透进来 - 若需完全控制，得在
::slotted(*)里重置：比如::slotted(td) { all: initial; font-family: sans-serif; } - 不要依赖
:host table去覆盖 slot 内样式，它只管 shadow 内部，不管 slot 插入的内容 - 更稳妥的做法是禁止用户直接传
<tr>，改用属性或 JSON 数据驱动渲染
IE11 和旧版 Safari 下的降级 fallback
Shadow DOM 在 IE11 完全不支持，Safari 10.1 以下只支持部分 API。真要兼容，就得放弃运行时隔离，退回到构建时方案。
- 用 CSS Modules 或 Vue 的
scoped，给每个<table>相关 class 加唯一 hash 后缀，比如my-table__cell_abc123 - 手动加命名空间前缀：
my-table table、my-table th，但要注意 specificity 不够时仍会被覆盖 - 避免用
table { all: revert; }这类新特性，兼容性差，且对继承属性控制不稳定
真正难的不是写几行 attachShadow()，而是想清楚哪些样式该由组件自己管、哪些该留给使用者控制；::slotted() 和 :host 的边界在哪里，比代码本身更容易出错。
