template和slot需通过自定义元素+attachshadow显式桥接才能生效，二者不自动联动；slot仅在shadow dom中对直系子节点分发内容，且匹配严格区分大小写与层级。
template 和 slot 是原生 HTML 实现组件化内容分发的底层组合，但它们不自动联动——template 本身不参与渲染，slot 本身不定义模板，二者必须通过 JavaScript 显式桥接才能生效。
为什么直接写 <template><slot></slot></template> 没反应
这是最常被误用的写法。template 标签只是声明一段“待克隆内容”，它不会自动挂载、不会自动解析内部的 slot；而 slot 只在 Shadow DOM 中起作用，且只对自定义元素的**直系子节点**做内容分发。
-
template内部写<slot name="header"></slot>→ 完全无效：浏览器把它当普通 HTML 片段，不触发任何分发逻辑 - 把
template当成“可复用组件”直接插入页面 → 不会渲染，也不会报错，内容永远静默丢弃 - 想靠
template+slot实现类似 Vue 的<mycard><h2 slot="title">...</h2></mycard>效果 → 必须先注册自定义元素，并在constructor中调用this.attachShadow({ mode: 'open' })，再把template.content插入shadowRoot
如何用 template 预定义结构并注入 slot
核心是两步分离：用 template 存结构，用自定义元素挂 Shadow DOM 并桥接两者。不能跳过注册和挂载环节。
- 先定义
<template id="card-tpl"><div class="card"> <header><slot name="header">Default</slot></header><main><slot>Content</slot></main> </div></template> - 再写自定义类：
class MyCard extends HTMLElement { constructor() { super(); const tpl = document.getElementById('card-tpl'); this.attachShadow({ mode: 'open' }).appendChild(tpl.content.cloneNode(true)); } } - 最后注册：
customElements.define('my-card', MyCard) - 使用时必须是直系子节点：
<my-card><h2 slot="header">Title</h2> <p>Body</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></my-card>→ 否则slot匹配失败，内容不出现
slotchange 事件为什么监听不到或返回空数组
slot.assignedNodes() 在刚挂载时几乎总是空的，因为内容分发是异步完成的，不是 DOM 插入即刻触发。直接在 connectedCallback 里查节点，等于查一个还没就位的快递单号。
- 必须监听
slotchange事件：const headerSlot = this.shadowRoot.querySelector('slot[name="header"]'); headerSlot.addEventListener('slotchange', () => { console.log(headerSlot.assignedNodes({ flatten: true })); }); -
slotchange不冒泡，也不能在shadowRoot上监听，必须绑定到具体slot元素上 -
assignedNodes()默认不展开嵌套结构，fallback 文本（如<slot>Default</slot>中的 "Default"）只有加{ flatten: true }才能拿到 - 如果用了
{ mode: 'closed' }，JS 无法访问shadowRoot，自然也拿不到slot引用，调试时容易误判为“没生效”
具名 slot 匹配失败的三个硬性条件
匹配不是模糊查找，是精确字符串比对 + 严格层级约束。错一个就全盘失效，且浏览器不提示、不报错、不警告。
-
slot属性值和name值必须完全一致，包括大小写、连字符、无空格：<h2 slot="main-content"></h2>只匹配<slot name="main-content"></slot>，不匹配name="main_content"或name="Main-Content" - 外部内容必须是自定义元素的**直系子元素**：
<my-card><div><h2 slot="header">Title</h2></div></my-card>中的h2是孙节点，不参与分发 - 多个同名
<slot name="item"></slot>时，Light DOM 中每个slot="item"元素按顺序填入一个slot，不是广播复制；多余的slot="item"元素会被忽略
真正难的不是写对语法，而是理解 template 是静态声明、slot 是运行时分发机制、自定义元素是唯一合法载体——三者缺一不可。漏掉 attachShadow()，或把 slot 放在非 Shadow DOM 环境，内容就彻底消失，连控制台都沉默。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
