slot标签未生效最常见原因是自定义元素未启用Shadow DOM，或attachShadow()调用时机错误（如在connectedCallback之后）；它只在Shadow Root内解析，Light DOM中写的slot会被当作文本节点渲染，不触发投影。
slot 标签为什么没生效
最常见原因：自定义元素没启用 Shadow DOM，或者调用了 attachShadow() 但写在了错误时机（比如在 connectedCallback 之后才创建 shadow root）。<slot></slot> 只在 Shadow Root 内解析，light DOM 里写的 <slot></slot> 会被当作文本节点原样渲染，完全不触发投影。
实操建议：
- 必须在构造函数或
connectedCallback中调用this.attachShadow({ mode: "open" }) - 创建 shadow root 后，再把内容（如
innerHTML或appendChild）写入this.shadowRoot，别往this直接塞 -
<slot></slot>必须出现在 template 或直接写在 shadowRoot 的 HTML 结构里，不能靠 JS 字符串拼出来再插入
怎么让不同内容进不同 slot
靠 name 属性双向匹配：父组件子节点带 slot="header"，就只进 <slot name="header"></slot>；没写 slot 属性的节点，自动进默认 slot（即无 name 的 <slot></slot>）。
注意点：
立即学习“前端免费学习笔记（深入）”；
- 命名 slot 不 fallback —— 不匹配的节点不会“掉”到默认 slot，而是被丢弃
-
slot属性只能写在 light DOM 子节点上，不能写在 shadowRoot 内部生成的节点上 - 一个节点只能有一个
slot值，重复写（如slot="a" slot="b"）以第一个为准
投影内容的样式怎么控制
投影进来的内容（light DOM 节点）默认继承宿主元素的字体、颜色等，但无法被 shadow DOM 内的普通 CSS 选择器直接选中——除非用 ::slotted() 伪类。
示例：
:host { font-family: sans-serif; }
::slotted(h2) { color: #2c3e50; margin: 0; }
::slotted([slot="footer"]) { font-size: 0.85em; opacity: 0.7; }
关键限制：
-
::slotted()只能作用于直接子节点，不能写::slotted(div p) - 不能通过它设置
background、border等影响盒模型的属性（浏览器会忽略） - 若需深度样式控制，得让父组件自己加 class，或改用
part+::part()（现代浏览器支持）
为什么投影后内容位置不对或错乱
常见现象：文字跑出容器、图片堆叠、布局塌陷——本质是投影节点脱离了原有文档流，但未重置其 display 行为。
典型场景与解法：
- 父组件传入的是纯文本或
<p>，但自定义元素内部<slot></slot>外层是display: flex容器 → 文本节点默认 inline，会和块级元素混排 → 给::slotted(*)加display: block或display: contents - 传入的
<img>在 slot 里撑不开高度 → 显式设img { display: block; }或在 slot 外层加min-height - 多个
<slot></slot>并列时没设flex-direction或grid-template-areas→ 投影内容按 source order 流式排列，不是按 slot 顺序
真正容易被忽略的，是投影节点的盒模型行为完全由父组件决定，而 slot 自身只是个“出口”，不参与布局计算。调试时先关掉所有自定义 display/float/position，确认基础流式是否正常，再逐层加样式。
