必须调用attachShadow，否则外部CSS无法生效；Shadow DOM天然隔离样式，内部<link>被忽略；adoptedStyleSheets需动态创建CSSStyleSheet实例，旧浏览器需降级为内联<style>。
attachShadow 必须调用，否则外部 CSS 无法生效——这是最常被忽略的前提。
为什么 <link rel="stylesheet"> 放在自定义元素内部没用
Shadow DOM 天然隔离样式，浏览器会直接忽略 Shadow 内部的 <link rel="stylesheet"> 标签。即使路径正确、返回 200，也不会加载或应用该 CSS。
- 原因：Shadow DOM 的解析器不处理内部
<link>，也不支持@import - 现象：开发者工具 Network 面板里根本看不到该请求，不是 404，而是压根没发
- 例外：只有通过
adoptedStyleSheets注入已创建的CSSStyleSheet实例才有效，但需现代浏览器（Chrome 73+、Firefox 96+）
adoptedStyleSheets 的安全用法和兼容性陷阱
它允许复用已解析的样式表，适合多实例共享同一套样式，但必须配合 document.adoptedStyleSheets 或动态创建 CSSStyleSheet 实例。
- 不能直接传 URL 字符串：
shadowRoot.adoptedStyleSheets = ['style.css']会报错 - 正确做法是先 fetch CSS 文本，再用
new CSSStyleSheet()解析并插入：sheet.replaceSync(cssText) - IE 和旧版 Safari 完全不支持，
adoptedStyleSheets为 undefined，必须降级到内联<style> - 注意内存：重复调用
replaceSync不会自动清理旧规则，需手动管理
最稳妥的写法：在 connectedCallback 中注入 <style> 字符串
兼容所有支持 Shadow DOM 的浏览器（包括 Edge 79+），且逻辑清晰、无依赖、易调试。
- 样式字符串应预编译为常量，避免每次连接都拼接或模板解析
- 示例：
shadowRoot.innerHTML = '<style>.my-card { color: var(--text-color, #333); }</style>' + this.innerHTML; - 若含大量样式，可拆成模块化字符串变量，用
shadowRoot.appendChild(styleEl)替代 innerHTML 拼接 - 不要在
constructor里操作shadowRoot—— 此时shadowRoot还未创建，会报Cannot read property 'appendChild' of null
::slotted() 和 :host 是唯一能“穿透”隔离的样式机制
外部样式无法影响 Shadow 内部，但你可以主动开放接口：用 :host 控制自定义元素自身，用 ::slotted() 控制传入的 light DOM 子节点。
立即学习“前端免费学习笔记（深入）”；
-
:host { display: block; }设置宿主标签默认显示方式 -
:host([size="large"]) { font-size: 1.4em; }响应属性变化 -
::slotted(*) { margin: 0.5em; }统一插槽内容外边距 - 注意：
::slotted(.btn)只匹配直接传入的<button class="btn">，不匹配其子元素
