<template>不能单独作为原子组件使用，因其仅是离线DOM片段，不渲染、无生命周期、不隔离样式；必须配合customElements.define()、attachShadow()和slot才能构成可复用、可验证的原子组件。
<template> 标签本身不参与渲染、不触发脚本、不加载资源，它只是浏览器内存里一段“待克隆的 HTML 片段”——在原子化设计中，它只承担「原子定义」的静态声明角色，不能直接构成可复用组件。
为什么<template>不能单独作为原子组件使用
常见错误现象是把 <template id="card"><div class="card">...</div></template> 写完就以为能当组件用了。结果页面空白，控制台也没报错，但内容就是不出现。
这是因为：
-
<template>的 content 是离线 DOM，不会自动插入文档流 - 它内部没有生命周期、不响应属性变化、不隔离样式
- 即便用
cloneNode(true)手动挂载，也默认进入 light DOM，受全局 CSS 影响，违背原子“可预测、可隔离”的核心要求
真正起作用的是<template> + attachShadow() 的组合
原子化设计强调“最小可独立验证单元”，而原生 Web Components 提供了封装边界。此时 <template> 只是内容源，关键动作在 JS 中：
立即学习“前端免费学习笔记（深入）”；
例如定义一个原子级按钮：
<template id="btn-tmpl">
<button><slot>Click</slot></button>
</template>
<script>
class AtomButton extends HTMLElement {
constructor() {
super();
const tmpl = document.getElementById('btn-tmpl');
this.attachShadow({ mode: 'open' }).appendChild(tmpl.content.cloneNode(true));
}
}
customElements.define('atom-button', AtomButton);
</script>
注意几个必须项：
-
customElements.define()名称必须含连字符，否则报Failed to execute 'define': The name must contain a dash -
constructor中必须调用super()，否则失去原生 button 的表单行为和焦点逻辑 -
slot必须放在 shadowRoot 内才有效；light DOM 中的<slot>完全被忽略
slot 分发不是万能的，匹配规则极严格
写 <atom-button><span slot="icon">⚙️</span>Settings</atom-button> 没反应？大概率踩了这些坑：
-
slot="icon"要求模板内存在<slot name="icon"></slot>，大小写、引号、空格全敏感 -
slot只对自定义元素的**直系子节点**生效，嵌套一层<div><span slot="icon">...</span></div>就失效 - 若模板中没声明
name，则所有无名子节点归入默认<slot>；但一旦写了name，无名节点就被丢弃
原子化设计里，<template> 是草稿纸，不是成品；真正让原子“活起来”的，是 custom element 的注册、shadow root 的创建、以及 slot 的精准配对。漏掉任一环，都只是静态 HTML 片段，不是可组装、可验证、可替换的原子。
