应显式重置Shadow DOM内所有元素的box-sizing：:host设自身样式，内部块级元素和表单控件分别声明border-box，slot内容需wrapper封装或文档约定。
为什么直接写 box-sizing: border-box 还是会被污染
Shadow DOM 确实隔离了外部选择器，但 UA 样式（浏览器默认样式）和部分可继承属性仍会穿透。比如 Chrome 对 input、button 的 UA box-sizing 默认值是 border-box，而 Firefox 是 content-box；更麻烦的是，宿主页面若写了 * { box-sizing: border-box }，它虽不能匹配 shadow 内部元素，但一旦你用了 ::slotted(*) 或漏掉重置，投影进来的子元素就可能被间接影响。
-
box-sizing本身不可继承，所以:host { box-sizing: border-box }没用——它只作用于宿主元素自身，不是内部所有盒子 - 必须对影子树内所有基础块级/表单元素显式声明，不能依赖通配符或父级继承
- 第三方 HTML 片段里自带的
div、section、input等标签，若没在 shadow 内重置，就会沿用 UA 默认值，跨浏览器表现不一致
正确重置 Shadow DOM 内部盒模型的三类写法
别碰 * { box-sizing: border-box } —— 它在 shadow 中无效，且容易漏掉伪元素或 slot 投影内容。应分层处理：
- 顶层容器用
:host设基础显示与尺寸行为：:host { display: block; box-sizing: border-box; }（注意：这里仅约束宿主元素自己） - 内部通用块级元素统一重置：
div, section, article, header, footer, main, form, fieldset { box-sizing: border-box; } - 表单控件单独兜底：
input, textarea, select, button, optgroup, option { box-sizing: border-box; margin: 0; padding: 0; }
这些规则必须通过 document.createElement('style') + textContent + shadowRoot.appendChild() 注入，不能拼在 shadowRoot.innerHTML 字符串里，否则 style 节点不进 CSSOM，box-sizing 彻底不生效。
slot 投影内容的盒模型怎么管
用 <slot> 接收外部传入的 HTML 时，那些元素的 box-sizing 不受 shadow 内部样式控制——除非你用 ::slotted() 显式覆盖。但注意：::slotted() 只支持可继承属性，box-sizing 不可继承，所以它无效。
立即学习“前端免费学习笔记（深入）”；
- 真正可行的是在宿主元素上设
container-type: size+container-query配合 JS 动态加 class，但这太重，不推荐 - 务实做法：要求使用者传入的内容已自带
box-sizing: border-box，并在文档中明确标注“slot 内容需自行重置盒模型” - 更稳妥的是封装一层 wrapper：
<div class="slot-wrapper"><slot></slot></div>，然后对.slot-wrapper > *做样式重置（需配合:host ::slotted(*)的替代方案，如用all: initial后手动补关键属性）
容易被忽略的 UA 差异和兼容性坑
Firefox 对 <textarea> 的 UA resize 和 box-sizing 处理与 Chrome 不同；Safari 16.4+ 才稳定支持 CSSStyleSheet，旧版只能靠字符串 style 注入——这意味着你无法用 adoptedStyleSheets 统一管理重置规则。
- 不要依赖
CSSStyleSheet做基础盒模型重置，优先用传统<style>节点注入 - 避免在
:host里写all: initial后忘记补display和box-sizing，否则元素塌陷或尺寸错乱 - 测试必须覆盖 Safari 10.1+、Firefox 63+、Chrome 41+，尤其关注
fieldset、legend这些冷门但盒模型特殊的元素
真正起效的盒模型隔离，从来不是加一条规则就完事；它需要你主动覆盖每一类可能进入 shadow 的元素，并接受 slot 投影内容永远需要额外约定或 wrapper 封装。
