slot默认内容不显示的首要原因是父元素存在直系子节点（含空格、换行符等），导致assignednodes()非空；其次需确认shadowroot存在、具名插槽name字面量全等且为直系子节点、vue中动态插槽名必须用v-slot:[name]、插槽内容更新需响应式处理而非静态文本。
slot 默认内容不显示？先查 assignedNodes() 是否为空
浏览器对 slot 的 fallback 逻辑非常严格：只要父元素存在任意直系子节点（哪怕只是换行符、空格或注释），slot 就认为“已分配”，默认内容立即被忽略。写成 <my-comp></my-comp> 能显示 <slot><p>Loading</p></slot>；但写成 <my-comp></my-comp>（含空格）就完全不渲染。
调试时不能只看页面是否空白，得用 JS 检查：
const slot = this.shadowRoot.querySelector('slot');
console.log(slot.assignedNodes()); // 返回 [] 才表示真没分配
常见误判点：
- Vue 模板中换行缩进会生成 Text 节点，导致
assignedNodes().length > 0 - React 中用
children传空字符串或{null}，仍算“有分配” - Web Components 中未调用
this.attachShadow({ mode: 'open' })，shadowRoot为null，查不到slot
具名插槽 name 不匹配？确认字面量全等且为直系子节点
slot 的 name 和父级的 slot 属性（或 v-slot:[name]）必须字面量严格一致：大小写、连字符、空格全敏感，且不支持通配或模糊匹配。
子组件中定义：<slot name="header"></slot>
父组件有效写法仅限：
<h1 slot="header">Title</h1><template slot="header"><h1>Title</h1></template>
以下全部失败：
-
<h1 slot="Header"></h1>（大小写错） -
<h1 data-slot="header"></h1>（属性名错） -
<div><h1 slot="header"></h1></div>（非直系子节点） -
<h1 slot=" header "></h1>（前后空格）
动态插槽名在 Vue 中怎么写？必须用 v-slot:[name] + template
Vue 中无法在 <slot></slot> 标签上绑定 name，如 <slot :name="dynamicSlotName"></slot> 完全不生效。子组件插槽名必须是静态字符串，动态逻辑只允许出现在父组件的分发端。
正确做法：
- 子组件保持固定名：
<slot name="header"></slot>、<slot name="footer"></slot> - 父组件用响应式变量控制分发位置：
<template v-slot:>...</template>，其中slotName是data或computed返回的字符串 -
v-slot:[slotName]只接受字符串值；若slotName为null或undefined，Vue 会抛错，不会静默降级
注意：纯 HTML 写法（如 <h1 slot="{{ dynamic }}"></h1>）在 Vue 中无效，必须走 Vue 指令系统。
插槽内容更新不触发重渲染？它不是响应式数据通道
slot 分发的是 DOM 节点引用，不是响应式数据流。父组件改了数据，插槽内部不会自动刷新。
错误写法：<my-card>{{ title }}</my-card> —— title 变化时，整个插槽内容不会更新。
正确做法分场景：
- Vue 中：用
<template v-slot:default>{{ title }}</template>，让 Vue 把插槽内容纳入响应式更新链 - Web Components 中：监听
slotchange事件，并手动调用this.render()或更新 shadow DOM - 若插槽内含子组件，确保其 props 正确绑定，而非依赖插槽文本节点的静态快照
真正难调试的从来不是语法怎么写，而是「为什么写了却没效果」——绝大多数问题出在节点层级、空格/换行、name 字符串匹配或响应式上下文缺失上，而不是 slot 本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
