slot是Web Components中Shadow DOM专用的内容分发机制，仅在自定义元素调用attachShadow()创建影子根后生效，外部内容须为直系子节点且name严格匹配，否则不渲染也不报错。
slot 不是模板占位符，也不是框架语法糖；它只在自定义元素的 Shadow DOM 里生效，且必须调用 attachShadow() 才能工作——没挂影子根，写一百个 <slot> 都不会渲染。
为什么 <slot> 完全没反应？
最常见原因是把 <slot> 当普通 HTML 标签用了：直接写在页面里、塞进 <div> 中、或放在未注册的自定义标签内部。浏览器会忽略它，不报错也不警告。
- 必须用
customElements.define()注册合法自定义元素（如<my-card>），不能对<div>或<p>调用attachShadow()，否则抛出DOMException: This element does not support shadow roots -
attachShadow({ mode: 'open' })必须在constructor或connectedCallback中执行，且只能调用一次 - Shadow DOM 内容需显式插入：用
shadowRoot.innerHTML = '...'或shadowRoot.appendChild(template.content.cloneNode(true))
内容“消失”了？检查直系子元素和 name 匹配
写了 <slot name="header"></slot>，外部也写了 <h2 slot="header">标题</h2>，但页面空白——大概率是层级或字符串不匹配。
- 外部内容必须是自定义元素的**直系子元素**：
<my-card><h2 slot="header">标题</h2></my-card>✅；<my-card><div><h2 slot="header">标题</h2></div></my-card>❌（<h2>是孙节点，不参与分发） -
name和slot属性值**严格区分大小写、完全相等**：<slot name="Header">不匹配<h2 slot="header"> - 多个同名
<slot name="item">时，Light DOM 中每个slot="item"元素按顺序填入一个 slot，不是广播复制 - 没带
slot属性的元素，只尝试匹配第一个无name的<slot>；后面再多空<slot>也收不到
assignedNodes() 返回空？别急着查，先等 slotchange
在 connectedCallback 里立刻调 slot.assignedNodes()，大概率拿到空数组——因为此时内容还没完成分发。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 监听
slotchange事件才是可靠时机：slot.addEventListener('slotchange', () => { console.log(slot.assignedNodes({ flatten: true })); }) -
assignedNodes()默认不展开嵌套结构，必须加{ flatten: true }才能拿到所有最终投射进来的节点（包括 fallback 内容里的节点） -
slotchange不冒泡、不捕获，也不能用addEventListener('slotchange', ...)在 shadowRoot 上监听，必须绑定到具体<slot>元素上 - Firefox 63 以下不支持
slotchange，需降级用MutationObserver监听 slot 的childList
::slotted() 样式不起作用？记住它只认单层选择器
::slotted(h2) 有效，::slotted(div h2) 无效——这不是 bug，是规范限制。
-
::slotted()只能匹配被投射进来的**直接子元素**，不支持后代、子代或属性组合选择器 - 正确写法：
::slotted(h2)、::slotted([slot="footer"])、::slotted(.btn) - 错误写法：
::slotted(div h2)、::slotted(h2 > span)、::slotted(*)（通配符不支持） - 它只在 Shadow DOM 的
<style>块中生效，且只影响投射内容，不影响 slot 自身或 fallback 文本
真正难的不是写对 <slot>，而是理解它不移动 DOM、不改变事件路径、不参与 SSR —— 所有依赖服务端预渲染或 SEO 的场景，都得绕开原生 slot 行为做适配。
