template 标签不渲染，需用 JavaScript 克隆 content 插入；slot 仅在自定义元素的 Shadow DOM 中生效，依赖 attachShadow 和元素升级，二者组合须在 connectedCallback 或构造时手动处理。
template 标签本身不渲染，必须配合 JavaScript 手动克隆使用
template 是 HTML 原生的“离线模板容器”，浏览器解析时跳过其内容，不会创建 DOM 节点，也不会触发资源加载（比如 <img> 不会请求图片）。这意味着你不能直接靠写个 <template><p>hello</p></template> 就让内容显示出来。
常见错误是以为给 template 加 id 或 class 后用 CSS 选中就能生效——不行，它不在主文档流里。真正要用，得用 JS 拿到它的 content 属性，再 cloneNode(true) 插入目标位置：
const tmpl = document.querySelector('#my-tmpl');
const instance = document.importNode(tmpl.content, true);
document.body.appendChild(instance);
- 必须用
importNode或cloneNode(true)，直接appendChild(tmpl)无效 -
content是一个DocumentFragment，不是普通元素，不能直接调用querySelector等方法（需先挂载或遍历） - 如果模板里有
<script>，默认不会执行；需要手动创建并运行（且注意 CSP 限制）
slot 是 Web Components 的分发机制，只在 custom element 内部有效
slot 不是独立功能，它依赖于 Shadow DOM 和自定义元素生命周期。你在普通 HTML 里写 <div><slot name="header"></slot></div> 完全没用——浏览器不认识这个语义，也不会做任何内容分发。
只有当它出现在自定义元素的 shadow root 中，且该元素通过 attachShadow 创建了 Shadow DOM，slot 才开始工作：
立即学习“前端免费学习笔记（深入）”；
class MyCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<div class="card">
<header><slot name="header">Default header</slot></header>
<main><slot>Default content</slot></main>
</div>
`;
}
}
customElements.define('my-card', MyCard);
- 外部使用时，用具名属性匹配：
<my-card><h2 slot="header">Title</h2><p>Body</p></my-card> - 不带
slot属性的子节点，会落入默认<slot>（即无name的那个） - 如果 shadow root 是
{mode: 'closed'}，外部无法通过shadowRoot访问，但slot分发仍正常
template + slot 组合只在 custom element 构造阶段有意义
你不能把 template 当作 slot 的“内容源”。常见误解是这样写：
<template id="card-tmpl">
<my-card>
<h2 slot="header">From template</h2>
</my-card>
</template>
这不会自动激活 slot 分发。因为 template 里的 <my-card> 只是字符串片段，还没被升级为自定义元素，更没创建 shadow root。
- 正确做法：在 custom element 的
connectedCallback里，用 JS 把template.content克隆后 append 到 shadow root 或 light DOM - 或者，在定义元素时，把
template内容作为初始 shadow DOM：this.shadowRoot.appendChild(document.importNode(tmpl.content, true)); - slot 分发发生在元素插入文档后、渲染前的“分发阶段”，所以必须确保元素已 upgrade、shadow root 已存在、子节点已挂载
兼容性与性能要注意的硬限制
Chrome 67+、Firefox 63+、Safari 10.1+ 支持 slot，IE 完全不支持。而 template 支持度好得多（IE11+），但 IE 下 content 是只读 DocumentFragment，importNode 行为也不一致。
- 不要在 SSR 场景下依赖
slot渲染——服务端没有 Shadow DOM，slot 不会被处理，内容可能丢失或错位 - 大量使用
slot且频繁重排子节点时，浏览器需反复计算分发结果，可能影响性能；可用slotchange事件监听变化，而非轮询 -
template中的相对路径（如src="./img.png"）在克隆后仍按原页面 base URL 解析，不是按 template 所在位置
slot 的“分发”本质是引用映射，不是复制节点。这意味着修改 slot 中的子元素，会同步反映在原始 light DOM 节点上——这点常被忽略，容易导致意外交互。
