::slotted() 仅匹配直接插入 slot 的一级子元素，不支持后代选择器或嵌套样式；如 ::slotted(div h2) 无效，深层样式需由宿主控制或内容自带 class。
::slotted() 只匹配插槽内容的一级子元素
因为 ::slotted() 的设计目标就是「只穿透 Shadow DOM 边界，选中被插入的顶层节点」，它不递归匹配后代。规范明确限制：它只对直接插入到 <slot></slot> 中的元素生效，对这些元素内部的嵌套结构完全无视。
常见错误现象：::slotted(div h2) 写了但没效果；::slotted(.card) h2 也无效——不是浏览器 bug，是 CSS 规范故意不支持这种写法。
-
::slotted(h2)✅ 匹配直接插进<slot></slot>的<h2></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></p>），::slotted() 做不到。它只能给那个 <div class="card"> 加样式，不能进到里面去。
<p>可行方案只有两个：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>让父组件在插入时就带上足够细粒度的 class：<code><div class="card">
<h2 class="card-title">...</h2>
<p class="card-body">...</p>
</div>，然后子组件用 ::slotted(.card-title) 单独控制
scoped 或 CSS Modules 封装的组件），子组件不干预其内部::slotted() 是纯 CSS 机制，不响应运行时 DOM 变更Vue / Web Components 中容易混淆的边界
很多人以为 :slotted()（Vue）和 ::slotted()（原生）行为一致，其实 Vue 的 :slotted() 是编译时模拟，并不真正创建 Shadow DOM。但它仍遵守同样的「仅一级」规则——这点常被忽略。
典型翻车场景：
- 在 Vue
<style scoped></style>里写:slotted(.list) li→li永远不会被选中，因为:slotted()只作用于.list这个节点本身 - 用
v-for渲染插槽内容，结果发现::slotted(.item)只命中最外层容器，循环生成的子节点不在作用域内 - 第三方 UI 库的插槽返回 Fragment 或
<template></template>，实际插入的是多个并列节点，::slotted(div)只能匹配其中的<div>，其他标签漏掉 <h3>替代方案：用属性选择器或 slot name 分治</h3> <p>当必须区分插槽内容的不同层级语义时，硬靠 <code>::slotted()往下钻是死路。更务实的做法是借力 HTML 语义本身：- 用
slot="header"/slot="footer"显式命名插槽，再配合::slotted([slot="header"]) > h2—— 注意这里用了>，但前提是h2确实是命名插槽内容的直接子元素 - 要求父组件插入时加数据属性：
<p data-part="intro">...</p>，子组件写::slotted([data-part="intro"])，比猜结构可靠得多 - 如果项目用 TypeScript + JSX，可封装一个带类型约束的插槽组件，强制传入带明确 class 的片段，从源头杜绝歧义
真正麻烦的从来不是怎么写选择器，而是谁该负责哪一层样式——插槽机制的本质是解耦，强行越界控制只会让边界模糊、责任不清。
- 用
