SSR 中插槽内容为空，因 仅为占位符且服务端无法接收父组件传入内容；需在 内提供静态默认内容、确保具名插槽 name 严格匹配、作用域插槽数据需服务端预置、原生 Web Components 的 slot 不支持 SSR。
插槽内容在 SSR 中根本不会被分发
服务端渲染时，<slot></slot> 标签本身不输出任何内容，它只是个占位符。真实内容由父组件传入，而 SSR 阶段子组件的 <slot></slot> 还没收到任何传入内容 —— 所以最终 HTML 里这部分是空的，搜索引擎爬虫看到的就是空白区域。
常见错误现象：
– 页面首屏 HTML 源码中插槽位置为空白或仅剩 <slot></slot>
– Lighthouse 报告提示“文本内容不可见”或“关键内容未在 HTML 中呈现”
- 解决办法：必须在父组件中显式提供默认内容（写在
<slot></slot>标签内），且该内容需是静态可渲染的 HTML 片段 - 若依赖 JS 动态注入插槽内容（比如通过
v-if或ngIf控制），SSR 无法捕获，必须改用服务端可执行的逻辑兜底 - Vue/Nuxt 用户注意：
<slot>默认文案</slot>在setup()+<script setup></script>场景下仍有效；但若用defineSlots显式声明，需确保编译器能提取到 fallback 文本
使用具名插槽时，父组件必须明确指定 name 属性
具名插槽不是靠顺序匹配，而是靠 name 字符串严格对应。漏写、拼错、大小写不一致，都会导致内容“消失”——不是报错，而是静默丢弃。
典型场景：
– 组件库中 <modal></modal> 要求 <template></template> 和 <template></template>
– 自定义表格组件期望 <template row></template>，但父组件写了 #body 或 #content
立即学习“前端免费学习笔记（深入）”；
- 检查方式：打开浏览器开发者工具，查看渲染后的 DOM 中是否还残留
<slot name="xxx"></slot>标签（说明没被填充） - Vue 用户注意：
#xxx是v-slot:xxx的缩写，但name值必须和子组件<slot name="xxx"></slot>完全一致，包括连字符、下划线等符号 - React 中无原生插槽机制，类比实现（如
children+props.header）时，命名一致性同样关键，否则 props 为undefined导致渲染异常
作用域插槽的数据传递时机影响内容可索引性
作用域插槽把子组件内部数据（如 item、index）暴露给父组件模板，但这些数据只有在子组件完成响应式初始化后才可用。如果父组件插槽内容依赖这些变量生成关键文本（比如 {{ item.title }}），而 SSR 阶段子组件尚未运行，那这部分文本就不会出现在初始 HTML 中。
- 性能影响：客户端 hydration 时才补上文本，造成 FOIT（Flash of Invisible Text）或布局偏移（CLS）
- SEO 影响：搜索引擎只读取初始 HTML，
item.title这类动态内容对爬虫不可见 - 可行方案：子组件在 SSR 阶段同步提供
item的序列化快照（如通过serverPrefetch或asyncData提前获取），再注入 slot scope；或改用普通插槽 + 父组件传入预处理好的结构化数据
插槽与 Web Components 的 shadow DOM 兼容性差
原生自定义元素中使用 <slot></slot> 时，内容分发（content distribution）受 shadow DOM 限制。父级 HTML 写在 custom element 外部的内容，只有符合 slot name 匹配规则才会被“投射”进 shadow root —— 但这个过程完全在客户端完成，服务端无感知。
错误现象：
– 使用 lit 或 Stencil 开发的组件，在 SSR 输出中插槽位置为空
– Chrome DevTools 的 Elements 面板显示 “#shadow-root (open)” 下没有内容，但 Light DOM 里明明写了
- 根本原因：标准 Web Components 规范不支持服务端 slot 分发，所有分发逻辑由浏览器 runtime 执行
- 折中做法：避免在需要 SEO 或首屏强语义的区域使用原生
<slot></slot>；改用属性传值（heading-text、description）或 CSS-in-JS 注入文本 - 若必须用，Lit 用户可配合
ssrTemplate手动模拟 slot 渲染，但需自行维护两套模板逻辑，容易不同步
插槽不是“自动内容搬运工”，它是运行时契约，不是编译期替换。任何依赖客户端执行才能生效的插槽行为，都会让内容分发失效——这点在构建 SEO 敏感或首屏性能关键的应用时，最容易被忽略。
