slot是Web Components中仅在Shadow DOM生效的内容分发机制，必须调用attachShadow()创建影子根，且外部内容须为自定义元素的直系子元素；具名slot严格按name字符串匹配，::slotted()仅支持直系子元素选择器。
slot 不是通用 HTML 标签，它只在 Web Components 的 Shadow DOM 环境中起作用——没调用 this.attachShadow()，写了也白写。
slot 必须配合 attachShadow() 才能生效
- 浏览器看到
<slot></slot>时，不会做任何事，除非它位于一个已挂载 Shadow Root 的自定义元素内部 - 常见错误：在普通页面里直接写
<slot name="header"></slot>，或在未调用attachShadow()的自定义元素类里声明它 - 正确做法必须在构造函数中显式创建：
constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = `<slot name="header"></slot>`; } - 如果用了
{ mode: 'closed' }，JS 无法访问shadowRoot，但slot渲染仍正常——只是调试时查不到节点，容易误判为“没生效”
具名 slot 和默认 slot 的匹配规则很严格
-
<slot name="header"></slot>只匹配<h2 slot="header">标题</h2>，不匹配slot="Header"（大小写敏感）、slot="header-text"（字符串不等同）、slot="{{name}}"（不支持表达式） - 没带
slot属性的元素（如<p>正文</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="财经HTML高端海报生成" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a> <p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p> </div> <a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>）只会进入第一个无name的<slot></slot> - 多个无
name的<slot></slot>并列时，只有第一个接收内容，其余被忽略 - 同名
<slot name="item"></slot>出现多次时，Light DOM 中每个slot="item"元素会按顺序填入对应 slot（不是复制广播），即第 1 个slot="item"→ 第 1 个<slot name="item"></slot>，以此类推
::slotted() 样式只能作用于投射进来的直系子元素
-
::slotted(h2)有效，::slotted(div h2)或::slotted(h2 span)无效（不支持后代选择器） -
::slotted(*)无效，通配符不被支持 -
::slotted([slot="footer"])或::slotted(.btn)是合法写法 - 这些样式必须写在 Shadow DOM 内部的
<style></style>中，不能放在 Light DOM 或全局 CSS 里 - 投射进来的内容本身仍保留在 Light DOM，其原始样式和事件路径不受 Shadow DOM 影响，仅通过
::slotted()可有限干预外观
真正容易被忽略的点是：内容没消失，只是被浏览器跳过了渲染。一旦 slot 匹配失败、或外部元素不是自定义元素的直系子元素（比如包了一层 <div>），那些节点就留在 Light DOM 里，但完全不显示——不是隐藏，是根本没参与分发逻辑。调试时得先确认结构层级、<code>attachShadow 调用时机、以及字符串是否精确一致。
