具名插槽必须严格匹配name值：子组件与父组件中名称须完全一致，区分大小写、禁用空格和特殊字符，kebab-case为最佳实践。
具名插槽怎么写才能被父组件正确识别
关键就一点：slot 元素的 name 属性值，必须和父组件中 v-slot:xxx（Vue）或 slot="xxx"（原生 Web Components）里的名称完全一致，且不能含空格、特殊字符或大写字母（Web Components 规范要求 name 为小写 ASCII 字符 + 连字符）。
常见错误是拼写不一致，比如子组件写 <slot name="header"></slot>，父组件却用 <template v-slot:header></template> 或 <div slot="Header"> —— 大小写不同就匹配失败，内容直接 fallback 到默认插槽或不渲染。
<ul>
<li>Vue 中推荐统一用 kebab-case：子组件 <code><slot name="user-avatar"></slot>，父组件用 <template v-slot:user-avatar></template>
<slot></slot> 在自定义元素中，slot="user-avatar" 和 <slot name="user-avatar"></slot> 是严格对应的slot="0"、slot="" 或 slot="default" 作具名插槽名——这些是保留字或无效值为什么 slot="xxx" 不生效？检查这三处
最常卡在 DOM 渲染时机和作用域上。具名插槽不是“挂载即生效”，它依赖宿主元素是否已解析 slot 属性并完成分配（slot assignment）。
-
<my-card><h2 slot="title">Hello</h2></my-card>中，如果<my-card></my-card>内部没定义<slot name="title"></slot>，h2就会留在 light DOM 里不动，不显示也不报错 - 动态插入内容时（如通过
innerHTML设置），浏览器不会自动触发 slot 分配，得手动调用element.assignSlots()（仅部分浏览器支持）或改用appendChild - Shadow DOM 中，只有 light DOM 子节点能参与 slot 分配；Shadow DOM 内部的元素即使写了
slot="xxx"也无效
Vue 与原生 slot name 的行为差异
Vue 的 v-slot 是编译时逻辑，原生 slot 是运行时 DOM 分配机制，二者名字虽同，但底层不可互换。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
立即学习“前端免费学习笔记（深入）”；
- Vue 组件里写
<slot name="footer"></slot>，父组件必须用<template v-slot:footer></template>—— 用<div slot="footer"> 会被 Vue 忽略，当成普通子节点 <li>纯 HTML 自定义元素中，<code><slot name="footer"></slot>只响应slot="footer"属性，v-slot完全无意义 - Vue 3 的
<slot name="default"></slot>对应v-slot:default，但原生没有default这个 slot name 概念，默认插槽就是无name的<slot></slot> - 多个无
name的<slot></slot>会导致后一个覆盖前一个（浏览器按顺序分配，最后的 slot 接收所有未匹配节点） -
<slot name=""></slot>和<slot></slot>等价，但name=""易引发混淆，建议只用裸<slot></slot> - 若子组件有具名插槽但父组件没传对应内容，该位置渲染空内容（不是报错），可加
<slot>缺省文案</slot>提供 fallback
name 属性为空或缺失时的 fallback 行为
name 属性缺失或为空字符串，该 slot 就成为“默认插槽”——但它只接收那些没指定 slot 属性的子节点，且一个组件内只能有一个无名 <slot></slot>。
slot 属性的误解——名字一样，但谁认谁、什么时候认，得看上下文环境。
