插槽（slot）本身不控制颜色，仅作内容分发占位符；颜色需通过::slotted()伪类在shadow dom内设置，或结合css自定义属性与:host显式传递。
Web Components 中插槽（slot）本身不控制颜色
插槽只是内容分发的占位符，它不会自动继承或应用 CSS 颜色样式。你看到组件内部文字变色，不是 slot 在起作用，而是父级样式穿透、Shadow DOM 边界规则或组件内部默认样式的组合结果。
常见错误现象：slot 里的文本颜色没按预期变化；加了 color: red 到 <slot></slot> 标签上完全无效；在 Shadow DOM 外设置 my-button { color: blue }，但按钮内文字仍是黑色。
-
<slot></slot>是一个 HTML 元素，但它在渲染时会被替换成投射进来的内容，自身不参与样式渲染 - 颜色必须作用于投射内容本身（如
<span slot="label">Submit</span>），或通过::slotted()伪类在 Shadow DOM 内部控制 - 外部样式无法直接穿透 Shadow DOM，除非使用
:host、::slotted()或inherit显式承接
::slotted() 是控制插槽内容颜色的唯一标准方式
想让投射进 slot 的元素响应组件主题色，必须在组件的 Shadow DOM 样式中使用 ::slotted() 伪类。它只匹配被投射进来的顶层元素（不深入子树），且只对具有样式的元素生效。
使用场景：自定义按钮、卡片标题、表单项标签等需要统一配色但内容由使用者提供的组件。
立即学习“前端免费学习笔记（深入）”；
简短示例：
shadowRoot.innerHTML = `
<style>
::slotted(span) { color: var(--primary-color, #007bff); }
::slotted([slot="icon"]) { fill: currentColor; }
</style>
<slot name="icon"></slot>
<slot></slot>
`;
-
::slotted()不支持嵌套选择器，比如::slotted(div span)无效 - 它不能改变投射内容自身的 class 或 style 属性，只能叠加样式规则
- 如果投射内容自带
style="color: green"，会覆盖::slotted()的 color（层叠优先级更高） -
currentColor是安全的选择——它能继承::slotted()设定的颜色，并传递给 SVGfill或边框
color 继承在 Shadow DOM 中是断裂的，需显式打通
默认情况下，Shadow DOM 外的 color 不会自动传入内部，哪怕用了 :host。很多开发者以为设个 :host { color: red } 就能让所有插槽内容变红，其实不行。
性能与兼容性影响：过度依赖 inherit 或大量 ::slotted(*) 可能触发重排，尤其在动态更新频繁的插槽内容中；IE 完全不支持 ::slotted()，需降级方案。
- 正确做法是：
:host { --text-color: inherit; }+::slotted(*) { color: var(--text-color); } - 避免用
::slotted(*)，尽量限定元素类型（如::slotted(h1)、::slotted(.label)），减少样式匹配开销 - 若需支持旧浏览器，得在组件外层包裹容器并用 class 控制颜色，或用 JS 动态注入 style
CSS 自定义属性（CSS Custom Properties）是跨边界传色最实用的手段
比起硬编码颜色值或依赖继承，用 --color-primary 这类自定义属性，配合 :host 和 ::slotted()，才是 Web Components 中稳定控色的核心链路。
容易踩的坑：把变量定义在 <style></style> 标签里却忘了加 :host 上下文；在 Light DOM 中设置变量但未确保作用域覆盖到组件实例；多个同名变量在不同层级冲突导致颜色错乱。
- 务必在
:host上声明变量，例如:host { --color-text: #333; }，否则插槽内var(--color-text)读不到 - 变量可被外部通过内联 style 覆盖：
<my-card style="--color-text: #e74c3c"></my-card> - 不要在
<slot></slot>元素上写style，它不会保留——样式必须作用于投射内容或通过::slotted()注入
::slotted()，而是理清 Shadow DOM 的样式边界在哪、变量从哪来、谁有权覆盖谁。 
