自定义元素样式未生效是因为Shadow DOM默认隔离样式，外部CSS无法穿透，且内部<style>必须显式append到this.shadowRoot；常见现象是组件渲染但完全无样式，需在connectedCallback中创建style元素并注入shadowRoot。
自定义元素里样式为什么没生效
因为 Shadow DOM 默认隔离样式，外部 CSS 不会穿透进来，内部写的 <style> 如果没正确注入到 this.shadowRoot，就等于没写。常见现象是：组件渲染了，但字体、颜色、间距全用浏览器默认值，像没加任何样式一样。
必须把样式字符串或 <style> 元素显式 append 到 this.shadowRoot，不能靠外部 link 或全局 class。
-
this.attachShadow({ mode: 'open' })后立即创建<style>并插入，别等异步操作完成后再加 - 避免在
constructor里操作this.shadowRoot—— 此时它还是null - 如果用字符串拼接样式，注意换行和引号转义；推荐提前定义为常量，比如
static styles = `:host { display: block; } .title { font-size: 1.2em; }`
怎么把 CSS 字符串注入 shadowRoot
最轻量、兼容性最好的方式是在 connectedCallback 中创建 <style> 标签并 append 进去。不依赖构建工具，也不需要 adoptedStyleSheets（后者在 Safari 15.4 之前不支持）。
示例代码：
立即学习“前端免费学习笔记（深入）”；
connectedCallback() {
if (this.shadowRoot) return;
const shadow = this.attachShadow({ mode: 'open' });
const style = document.createElement('style');
style.textContent = `
:host { display: inline-block; }
.content { padding: 12px; background: #f9f9f9; }
`;
shadow.appendChild(style);
shadow.innerHTML += '<div class="content"><slot></slot></div>';
}
-
style.textContent比 innerHTML 更安全，不会触发 XSS 风险（前提是内容可控） - 别用
shadow.innerHTML = '<style>...</style>...'—— 多数浏览器会忽略<style>标签里的规则 - 若样式复杂，可拆成多个
document.createElement('style')分别注入，便于调试和复用
如何让外部控制组件主题或尺寸
Shadow DOM 隔离了样式，但不隔离 CSS 自定义属性（CSS Custom Properties）。用 ::host 和 ::host-context() 可以响应宿主元素上的类名或属性变化。
-
::host选中组件自身标签，比如<my-card size="large">→::host([size="large"]) { font-size: 1.4em; } -
::host-context(.dark)能响应父级的class="dark"，但注意兼容性：Firefox 61+、Chrome 63+、Safari 15.4+ 支持，旧版 Safari 不行 - 外部传入的
style="--card-bg: #eee"，可在 shadow 内用background-color: var(--card-bg, #fff); - 别在
::host里写font-family: "PingFang SC"这种系统字体——用户环境可能没有，应 fallback 到通用字体栈
为什么用了 adoptedStyleSheets 还是没样式
adoptedStyleSheets 是现代方案，但容易踩坑：它只对已存在的 CSSStyleSheet 实例生效，且不能在 constructor 或未 attach shadow 的时机调用。
- 必须先创建
const sheet = new CSSStyleSheet()，再sheet.replaceSync('...')，最后shadow.adoptedStyleSheets = [sheet] - 不能直接
shadow.adoptedStyleSheets = [new CSSStyleSheet().replaceSync('...')]——replaceSync返回的是 Promise，不是CSSStyleSheet - IE 和 Safari ≤15.3 完全不支持，用前得做
if ('adoptedStyleSheets' in Document.prototype)检测 - 动态切换主题时，
adoptedStyleSheets可替换整个数组，比反复增删<style>标签更高效，但首次加载仍建议 fallback 到<style>方案
真正麻烦的不是怎么注入，而是忘记检查 this.shadowRoot 是否已存在、是否被多次 attach、以及是否在错误生命周期里尝试写样式 —— 这些地方一错，样式就静默失效，连 console 都不报错。
