直接在 shadowRoot.innerHTML 中写 会导致 Shadow DOM 重建、CSS 转义错误及构建工具失效；应改用 document.createElement('style') 配合 textContent 注入，或采用 adoptedStyleSheets 复用外部样式。
shadowRoot.innerHTML 里直接写 <style></style> 是最常见也最容易出错的方式——它能用，但不等于“该这么用”。
为什么不能直接在 innerHTML 里拼接 <style></style>
看似简单：shadowRoot.innerHTML = `<style>div{color:red}</style>
<div>Hello</div>`，但实际会踩三个坑：
-
innerHTML赋值会触发 Shadow DOM 重建，导致已挂载的子节点、事件监听器、焦点状态全部丢失 - 样式规则若含 CSS 变量或
@media等复杂语法，容易因引号嵌套、换行转义出错（尤其模板字符串中） - 无法复用已有 CSS 文件，构建工具（如 Vite、Webpack）对这种内联字符串里的样式完全不可见，没法哈希、压缩、Tree Shaking
document.createElement('style') + textContent 更稳妥
手动创建 style 元素并设置 textContent，绕过 HTML 解析阶段，避免转义和重建问题：
class MyElement extends HTMLElement {
connectedCallback() {
const shadow = this.attachShadow({ mode: 'open' });
const style = document.createElement('style');
style.textContent = `
:host { display: block; }
.content { color: var(--text-color, #333); }
@media (prefers-color-scheme: dark) {
.content { color: #fff; }
}
`;
shadow.appendChild(style);
const div = document.createElement('div');
div.className = 'content';
div.textContent = 'Hello';
shadow.appendChild(div);
}
}
- 所有 CSS 语法（包括
@media、@keyframes、变量）都能原样写入，无需额外转义 - 样式与结构分离更清晰，便于后续提取为独立模块
- 如果样式内容来自外部 JS 模块（比如导出一个 CSS 字符串），
textContent是唯一可靠注入方式
别碰 @import 和 <link> 在 shadowRoot 里
这两条路在生产环境基本等于自废武功：
-
@import './style.css'写在<style></style>标签里：同步阻塞渲染，实测首屏延迟 300–600ms；路径基于 HTML 文档 URL 解析，极易 404；构建工具完全无法识别依赖 -
shadowRoot.appendChild(document.createElement('link'))：Shadow DOM 规范明确禁止<link rel="stylesheet">在 shadow 中生效；link.sheet始终为null，控制台无报错，样式就是不出现
adoptedStyleSheets 是目前唯一可控、可构建、可降级的方案——但它的前提，是先把 CSS 字符串或 CSSStyleSheet 实例准备好，而不是靠拼 HTML 字符串硬塞。内联引入的本质，不是“写得快”，而是“可控、可维护、不破坏生命周期”。 
