原生HTML的不支持运行时动态插槽名，命名插槽必须静态声明且name值为字面量字符串；slotchange仅在插槽内容首次分配或节点增删时触发；默认插槽接收所有未指定slot属性的内容；::slotted()支持有限样式穿透。

原生 HTML 的 不支持运行时动态增删插槽名，所谓“动态插槽”本质是监听 slotchange 事件 + 手动管理 assignedNodes()，不是 Vue 或 React 那种响应式 slot 渲染。

命名插槽必须在 template 内静态声明

浏览器解析 时就已确定插槽结构，name 属性值必须是字面量字符串，不能是变量或表达式。试图用 slot="{{name}}" 或 slot=${dynamicName} 会直接被忽略 —— 浏览器只认静态属性。

• ✅ 有效
• ❌ 不解析，等同于默认插槽
• ❌ 这是 Vue 语法，原生不识别

想实现多区域切换，只能预设一组固定命名插槽（如 header、main、aside），再通过 CSS display: none/block 或 Shadow DOM innerHTML 替换控制显隐。

slotchange 事件触发条件很具体

该事件只在插槽内容**首次分配完成**或**后续发生节点增删**时触发，不是每次 DOM 更新都触发。它不响应文本内容变更、样式修改或属性变化。

• 父组件插入新子元素到带 slot="xxx" 的节点 → 触发
• 父组件移除已有插槽内容 → 触发
• 父组件仅修改某子元素的 textContent → 不触发
• 父组件用 innerHTML 替换整个插槽容器 → 触发（因节点被销毁重建）

监听时建议加防抖，避免频繁调用 assignedNodes({ flatten: true }) 导致性能抖动；同时注意：assignedNodes() 返回的是实时引用，不要缓存它用于后续判断。

默认插槽与具名插槽共存时的分发规则

当模板中同时存在 和 ，父组件未指定 slot 属性的内容，**全部进入默认插槽**，哪怕有多个未命名节点 —— 它们不会被拆开塞进不同具名插槽。

• 父组件写：

  标题

  正文

  

  htmlppt.skill

  把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

  下载
  → 全部进默认插槽
• 父组件写：

  标题

  正文

  →
  进 title 插槽，
  进默认插槽

这个规则常被误读为“未命名节点自动按语义匹配”，实际没有智能匹配逻辑。想强制分流，必须显式加 slot 属性，否则一律归入默认插槽。

Shadow DOM 中插槽样式穿透限制真实存在

插槽内容渲染在 Shadow DOM 外部，但显示在 Shadow DOM 内部 —— 这导致一个关键约束：外部样式无法通过常规选择器影响插槽内容，而插槽内容里的样式也无法直接影响 Shadow DOM 内部非插槽元素。

• 外部写 my-card h2 { color: red; } → 无效（除非用 ::slotted(h2)）
• 插槽内写
  → 有效（内联样式优先级高）
• Shadow DOM 内写 .modal-header ::slotted(h2) { margin: 0; } → 有效，且只作用于被分发进该插槽的 h2

::slotted() 伪元素只支持简单选择器（不能含后代、子代或属性选择器），且无法穿透多层插槽嵌套。这是封装性保障，也是调试时最容易卡住的地方。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！