直接给加color无效，因其不渲染为真实DOM节点且display: contents；插槽内容样式需通过::slotted()匹配投射的顶层元素来设置。
为什么直接给<slot></slot>加color没用
<slot></slot>本身不渲染为真实 DOM 节点，它的 display 是 contents，样式不会作用于它自身。你看到的插槽内容颜色变化，从来不是因为给 <slot></slot> 写了 color: red，而是内容节点被其他规则命中了。
常见错误现象：<my-button><span class="label">提交</span></my-button>，在组件 Shadow DOM 里写 slot { color: blue } —— 完全无效。
真正起作用的是投射进来的 <span></span> 本身，或通过 ::slotted() 在 Shadow DOM 内部声明样式规则。
::slotted() 的匹配规则和限制
::slotted() 只匹配被投射进来的**顶层元素**（即直接子元素），不递归匹配后代。它也不能改变元素自身的 class 或 style 属性，只能叠加 CSS 声明。
立即学习“前端免费学习笔记（深入）”；
-
::slotted(span)→ 匹配投射进来的<span></span>，但不匹配<span><em>文本</em></span>中的<em></em> -
::slotted([slot="icon"])→ 只匹配带slot="icon"属性的顶层元素 -
::slotted(*)→ 匹配所有投射进来的顶层元素，但性能稍弱，慎用于高频更新场景 -
::slotted(div span)→ 语法错误，::slotted()不支持嵌套选择器
Vue 中用 :slotted() 替代 :deep() 的典型场景
Vue 单文件组件开启 scoped 后，父组件传入插槽的内容默认不受子组件样式影响。这时不能用 :deep()（那是穿透子组件内部结构的），而要用 :slotted() 明确针对插槽内容。
例如子组件 A.vue 有：
<template>
<div class="wrapper">
<slot></slot>
</div>
</template>
<style scoped>
:slotted(.highlight) {
color: var(--primary, #007bff);
font-weight: 600;
}
</style>
父组件使用时：
<A> <span class="highlight">关键信息</span> </A>
注意：如果投射内容自带内联样式如 style="color: green"，会覆盖 :slotted() 的 color（层叠优先级更高）；此时可改用 currentColor 或强制 !important（不推荐）。
兼容性与容易忽略的继承断裂问题
::slotted() 在 Chrome 67+、Firefox 63+、Safari 15.4+ 支持，IE 完全不支持。更重要的是：Shadow DOM 外的 color 不会自动继承进来，哪怕你在 :host 上设了 color: red，插槽内容也不会变红。
正确打通继承的方式是：
:host {
--text-color: inherit;
}
::slotted(*) {
color: var(--text-color);
}
这个组合才是可靠的主题色传递方案。别指望 :host { color: red } 自动让所有插槽文字变红——这是最常被忽略的底层机制。
