外部css类名对shadow dom内元素无效，因为shadow dom默认启用样式作用域隔离，外部选择器无法穿透边界匹配内部元素，仅继承有限css属性（如font-family、color），不继承自定义变量。
为什么外部CSS类名对Shadow DOM内元素无效
因为Shadow DOM默认启用样式作用域隔离，外部定义的.btn或#header选择器根本无法穿透边界匹配内部元素。你在DevTools里能看到元素，但Computed面板里查不到预期样式——这不是浏览器bug，是设计使然。
常见错误现象包括：给自定义组件加class="large"却无法放大内部文字；用全局body { font-size: 14px }，但Shadow DOM内字体大小不变；甚至!important也无效（除非写在Shadow内部）。
- Shadow DOM只继承有限的CSS属性（如
font-family、color），不继承自定义变量（--primary-color） -
attachShadow({ mode: 'closed' })会彻底阻断JS访问shadowRoot，连动态注入样式都不行 - 把
<style></style>写在宿主元素外部HTML里，等于没写——必须显式appendChild()到shadowRoot
用:host控制宿主元素自身样式
:host是唯一能从Shadow内部影响宿主标签（即自定义元素本身）的选择器。它不是装饰性语法，而是实际生效的样式入口。
例如你定义了<my-button></my-button>，想让它默认块级显示、带边框，但允许外部通过size="large"属性覆盖：
:host {
display: inline-block;
border: 1px solid #ccc;
padding: 8px 16px;
}
:host([size="large"]) {
padding: 12px 24px;
font-size: 1.2em;
}
:host(:hover) {
background: #f0f0f0;
}
-
:host只能在Shadow内部的<style></style>里用，外部CSS中写my-button是另一回事 - 属性匹配（如
[size="large"]）比class更可靠——外部class可能被移除或冲突，而attribute通常由组件自己管理 - 不要用
:host-context()，它已被废弃，Chrome和Firefox均已不支持
用part暴露可定制的内部子元素
当需要控制Shadow内部具体节点（比如按钮里的图标、弹窗里的标题栏），part属性是标准且轻量的方案。它不像::slotted()那样只管投射内容，而是直接标记内部DOM。
在组件模板中给目标元素加part：
<div part="header"><slot name="header">Default Header</slot></div> <button part="action">OK</button>
然后外部就能精准定制：
my-dialog::part(header) {
font-weight: bold;
border-bottom: 2px solid var(--accent, #007bff);
}
my-dialog::part(action) {
background: var(--primary-color, #007bff);
color: white;
}
-
::part()不支持嵌套选择器，my-dialog::part(action) span会失效，必须把span也单独标为part="action-label" - 所有
part名必须在组件文档里明确列出，否则使用者根本不知道能hook什么 - 部分旧版Safari（≤16.4）对
::part()支持不完整，需加-webkit-appearance: none等兜底
如何复用外部CSS变量但不破坏封装
Shadow DOM不自动继承--theme-color这类变量，但可以通过:host主动读取并透传，实现主题响应而不暴露内部结构。
在Shadow内部<style></style>里这样写：
:host {
--theme-color: var(--theme-color, #333);
--bg-color: var(--bg-color, #fff);
}
.content {
color: var(--theme-color);
background: var(--bg-color);
}
然后在宿主元素上设变量即可生效：
<my-card style="--theme-color: #e74c3c; --bg-color: #f9f9f9;"></my-card>
- 必须有
:host声明才能让var(--theme-color)在Shadow内解析成功，光写.content { color: var(--theme-color) }会 fallback 到初始值 - 兜底值（如
var(--theme-color, #333)）不能省略，否则变量未定义时会变成unset导致样式异常 - 避免在Shadow内用
@import引入外部CSS——兼容性差（Chrome 120+才稳定），改用<link rel="stylesheet">并确保CORS允许
::part()，而是决定哪些内部节点该暴露、暴露成什么粒度。暴露太多等于放弃封装，暴露太少又丧失定制能力。这没有银弹，得靠组件设计时就明确边界——比如part="icon"比part="left-icon"更通用，part="input"比part="text-input"更利于未来扩展。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
