Web Component中style标签注入CSS字符串可能失效，因解析依赖插入时机；应先attachShadow再动态创建style节点或使用adoptedStyleSheets（需兼容性兜底）。
Web Component中用style标签注入CSS字符串会失效？
直接在ShadowRoot里用innerHTML = '<style>...</style>'通常能渲染，但样式不生效——根本原因是浏览器对<style>标签的解析依赖于插入时机和宿主环境，原生customElements.define中若在constructor或connectedCallback早期插入，<style>可能未被CSS引擎识别。
- 必须等
ShadowRoot已挂载（即this.attachShadow({mode: 'open'})返回后）再插入<style>节点 - 不能用
innerHTML一次性写入含<style>的HTML字符串；应先创建style元素，再设textContent - 若CSS字符串含变量（如
var(--color)），确保宿主文档或:host已定义对应CSS自定义属性
adoptedStyleSheets比<style>更可靠？
是的，CSSStyleSheet实例 + adoptedStyleSheets是现代方案，绕过HTML解析阶段，样式立即生效且支持@layer、@import（有限制）和HMR热更新。
- 需用
new CSSStyleSheet()创建，再调用replaceSync(string)写入CSS文本 - 必须赋值给
shadowRoot.adoptedStyleSheets = [sheet]，不能写this.adoptedStyleSheets - 旧版Chrome（≤110）和Safari（≤16.4）不支持
adoptedStyleSheets，需降级到<style>fallback - 动态更新时，
replaceSync()比反复替换<style>节点性能更好，无重排
如何在组件JS里安全定义和复用样式字符串？
把CSS写成模板字符串容易出错：换行缩进被当空白、单双引号嵌套混乱、无法做变量插值。建议用带类型提示的常量对象管理，并在static get styles()中统一导出。
- 避免在
render()里拼接样式字符串——每次调用都新建CSSStyleSheet，浪费内存 - 用
String.raw包裹多行CSS，防止转义干扰（如\n、\t） - 若需主题切换，把颜色/尺寸抽成
const theme = { primary: '#007bff' }，再用Object.entries(theme).map(...)生成:host { --primary: #007bff; } - 注意
:host-context(...)在adoptedStyleSheets中有效，但:host > *这类后代选择器在ShadowRoot内仍受限于封装边界
常见错误：CSSStyleSheet.replaceSync报InvalidStateError
这个错误90%是因为试图对一个未被任何adoptedStyleSheets引用的CSSStyleSheet调用replaceSync——它要求sheet必须已“被采用”（即已出现在某个adoptedStyleSheets数组中）才能更新。
立即学习“前端免费学习笔记（深入）”；
- 正确顺序：创建sheet → 赋值给
shadowRoot.adoptedStyleSheets→ 再调用replaceSync() - 错误写法：
sheet.replaceSync(css); shadowRoot.adoptedStyleSheets = [sheet];—— 此时sheet尚未被采用 - 调试技巧：打印
sheet.ownerNode，若为null说明未被采用；sheet.cssRules.length可验证是否写入成功 - 服务端渲染（SSR）场景下，
CSSStyleSheet不可用，必须走<style>fallback路径
adoptedStyleSheets的兼容性兜底逻辑——不是加个if (CSSStyleSheet)就行，得判断shadowRoot.adoptedStyleSheets是否存在且可写，否则老老实实用appendChild(styleEl)。 
