::slotted()必须写在shadow root内部的style中，仅匹配slot直接子元素，不穿透、不递归；命名需精确对应，无法覆盖内联样式或!important规则。
::slotted()必须写在shadow root内部的
外部CSS文件、<link>引入的样式表，或者全局<style>块里的::slotted()规则全部无效——浏览器直接忽略，不报错也不警告。
常见错误现象：你在main.css里写了::slotted(button) { color: red; }，但插槽里的<button>颜色完全没变。
- 必须把
::slotted()规则写进自定义元素的shadowRoot.innerHTML或<template>内的<style>中 - 如果用JS动态注入，得确保
attachShadow()已执行且shadowRoot存在 -
<style>标签不能放在light DOM里（比如<my-card><style>::slotted(*){...}</style></my-card>），那只是普通文本节点
::slotted()只匹配slot的直接子元素
它不穿透、不递归、不选孙节点。传入<div><p>hello</p></div>，::slotted(p)永远不生效，因为<p>不是<slot>的子节点，而是<div>的子节点。
-
::slotted(div)✅ 能命中上面例子中的<div> -
::slotted(p)❌ 静默失败 - 想控制
<p>，得让使用者把class加到<div>上，比如<div class="content-block"><p>hello</p></div>，再写::slotted(.content-block) p——但注意，这句里的p是普通后代选择器，不是::slotted()的一部分
命名slot必须显式对应，且大小写/连字符敏感
插槽名是字符串精确匹配。外部写<h2 slot="Header">，而shadow里是<slot name="header">，内容就静默丢弃。
立即学习“前端免费学习笔记（深入）”；
- 默认插槽（无
name）推荐用::slotted(:not([name]))，比::slotted(*)更安全 - 具名插槽必须用
::slotted([slot="xxx"])，例如::slotted([slot="icon"]) - 连字符
-和下划线_不等价：slot="user-info"≠name="user_info"
::slotted()无法覆盖外部内联样式或高优先级规则
它不是“强制覆盖”，只是参与CSS层叠的一环。如果插槽内容自带style="color: green"，或外部有p { color: blue !important }，::slotted(p) { color: red }大概率被压掉。
- 安全做法是用
currentColor或CSS变量传递值，比如::slotted(button) { color: var(--button-color, #007bff); } - 真要强控颜色，应在宿主上设
:host { --button-color: red; }，再在shadow内声明变量继承链 - 文本节点（如
<my-card>plain text</my-card>）根本不会被任何::slotted()匹配——它不是元素节点
:hover等交互伪类，且Safari对复杂选择器的支持仍滞后。别把它当样式穿透主力，该由内容提供方承担的样式责任，就该落在他们自己写的class上。 
