slot在混合渲染中不自动水合，因浏览器仅静态匹配且服务端无法执行attachshadow()，导致shadow dom未创建、插槽机制失效；可靠方案是客户端在connectedcallback中显式调用attachshadow并注入slot。
slot 属性在混合渲染（如 SSR + CSR）中不会自动“水合”，它本身不参与水合逻辑——浏览器只做静态字符串匹配，不执行 JS 重同步；内容是否显示，完全取决于服务端输出的 DOM 结构是否满足 Shadow DOM 分发前提。
为什么 SSR 渲染后 slot 内容不显示
服务端生成的 HTML 若包含自定义元素和 slot 属性，但未在客户端调用 attachShadow()，则整个插槽机制根本未激活：<slot></slot> 标签被当作文本渲染，slot="xxx" 属性被忽略，内容留在 Light DOM 中却无处投射。
- 服务端无法执行 JS，所以
this.attachShadow()不会发生，Shadow DOM 不存在 →slot失效是必然结果，不是 bug - 即使服务端“模拟”了 slot 投影结构（比如把
<h2 slot="header"></h2>直接塞进 shadowRoot 对应位置），客户端 hydration 时若未重建 Shadow DOM，该结构会被 DOM diff 移除或覆盖 - 使用框架（如 Lit、Stencil）时，其 hydrate 流程会自动补全
attachShadow()，但纯原生自定义元素必须手动确保：在connectedCallback中调用，且不能重复调用
slotchange 在 hydration 后不触发的常见原因
客户端 JS 挂载完成，内容仍不显示？大概率是分发时机与 hydration 节点状态错位。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 服务端已输出
<my-card><h2 slot="header">标题</h2></my-card>，但客户端 JS 还没执行完，slot元素尚未被创建或未挂入shadowRoot -
slotchange事件只在内容实际分配变化时触发，而 SSR 输出的节点在 hydration 初期属于“已存在但未分配”状态，需等attachShadow()完成 + 浏览器完成一次投影计算后才可能触发 - 若在
connectedCallback中立即监听slotchange，但shadowRoot.querySelector('slot')还未就位（比如模板是异步加载的），监听会失败且无提示
如何让 slot 在混合渲染中可靠工作
关键不是“让 slot 水合”，而是确保客户端能重建完整的分发上下文。
- 服务端只输出轻量级骨架 HTML，避免伪造 Shadow DOM 结构；所有
<slot></slot>必须由客户端 JS 显式注入到shadowRoot中 - 自定义元素类中，
constructor不做任何 DOM 操作，connectedCallback中检查this.shadowRoot是否存在，不存在则调用this.attachShadow({ mode: 'open' })并插入模板 - 不要依赖服务端预置的
slot.assignedNodes()值；首次获取必须等slotchange触发，或用MutationObserver监听shadowRoot的childList变化后再查 - 若用框架（如 Lit），启用
ssrTemplate或hydrate选项，并确认其版本支持slot的 hydration 语义（Lit v3+ 支持，v2 需手动 patch）
slot 的匹配和投影发生在浏览器的 DOM 构建后期阶段，它不依赖 JS 执行顺序，但强依赖 Shadow DOM 是否真实存在。hydration 不等于“恢复 slot 状态”，它只是还原节点树；slot 分发是浏览器独立触发的一次性投影行为，不可逆、不可暂停、不响应后续 JS 修改 —— 写错一次，就得重新插入节点才能重试。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
