::slotted() 仅匹配直接插入 slot 的一级子元素，不支持后代选择器或嵌套样式；如 ::slotted(div h2) 无效，深层样式需由宿主控制或内容自带 class。
::slotted() 只匹配插槽内容的一级子元素
因为 ::slotted() 的设计目标就是「只穿透 Shadow DOM 边界，选中被插入的顶层节点」，它不递归匹配后代。规范明确限制：它只对直接插入到 <slot> 中的元素生效，对这些元素内部的嵌套结构完全无视。
常见错误现象：::slotted(div h2) 写了但没效果；::slotted(.card) h2 也无效——不是浏览器 bug，是 CSS 规范故意不支持这种写法。
-
::slotted(h2)✅ 匹配直接插进<slot>的<h2> -
::slotted(.title)✅ 匹配直接插进的带class="title"的任意元素 -
::slotted(div h2)❌ 语法合法但永远不匹配——::slotted()不解析空格后的选择器部分 -
::slotted(*) h2❌ 同样无效，外部的h2在 Shadow DOM 外，无法被::slotted()影响
插槽内容的深层样式必须由宿主控制或自带 class
如果你需要控制插槽里某段 HTML 的内部结构（比如 <div class="card"><h2>标题</h2><p>正文</p></div> 中的 <p>），::slotted() 做不到。它只能给那个 <div class="card"> 加样式，不能进到里面去。
可行方案只有两个：
立即学习“前端免费学习笔记（深入）”；
- 让父组件在插入时就带上足够细粒度的 class：
<div class="card"><h2 class="card-title">...</h2><p class="card-body">...</p></div>，然后子组件用::slotted(.card-title)单独控制 - 把样式逻辑下沉——让插槽内容自己带完整样式（例如用
scoped或 CSS Modules 封装的组件），子组件不干预其内部 - 避免依赖 JS 动态注入样式，因为
::slotted()是纯 CSS 机制，不响应运行时 DOM 变更
Vue / Web Components 中容易混淆的边界
很多人以为 :slotted()（Vue）和 ::slotted()（原生）行为一致，其实 Vue 的 :slotted() 是编译时模拟，并不真正创建 Shadow DOM。但它仍遵守同样的「仅一级」规则——这点常被忽略。
典型翻车场景：
- 在 Vue
<style scoped>里写:slotted(.list) li→li永远不会被选中，因为:slotted()只作用于.list这个节点本身 - 用
v-for渲染插槽内容，结果发现::slotted(.item)只命中最外层容器，循环生成的子节点不在作用域内 - 第三方 UI 库的插槽返回 Fragment 或
<template>，实际插入的是多个并列节点，::slotted(div)只能匹配其中的<div>，其他标签漏掉
替代方案：用属性选择器或 slot name 分治
当必须区分插槽内容的不同层级语义时，硬靠 ::slotted() 往下钻是死路。更务实的做法是借力 HTML 语义本身：
- 用
slot="header"/slot="footer"显式命名插槽，再配合::slotted([slot="header"]) > h2—— 注意这里用了>，但前提是h2确实是命名插槽内容的直接子元素 - 要求父组件插入时加数据属性：
<p data-part="intro">...，子组件写::slotted([data-part="intro"])，比猜结构可靠得多 - 如果项目用 TypeScript + JSX，可封装一个带类型约束的插槽组件，强制传入带明确 class 的片段，从源头杜绝歧义
真正麻烦的从来不是怎么写选择器，而是谁该负责哪一层样式——插槽机制的本质是解耦，强行越界控制只会让边界模糊、责任不清。
