模板与插槽
使用 template 和 slot 组合组件。
模板与插槽 是 CoddyKit 上的免费 JavaScript Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。
template 元素
<template> 元素包含不会立即生效的 HTML。它会被解析但不会渲染，其中的内容会一直留在页面之外，直到您将其克隆并插入页面，因此非常适合复用标记。
访问模板内容
模板的子节点位于其 .content 属性中，该属性是一个 DocumentFragment。其中的脚本、图像和样式在插入之前不会执行或加载。
// <template id="card"><p>Hi</p></template>
const tpl = document.getElementById('card');
const fragment = tpl.content; // DocumentFragment克隆模板
使用 importNode 或 cloneNode(true) 复制模板内容，然后插入克隆内容。克隆可以让您以较低的成本创建许多副本。
const tpl = document.getElementById('card');
const clone = tpl.content.cloneNode(true);
document.body.appendChild(clone);组件中的模板
自定义元素通常只定义一次模板，然后在每个实例中将其克隆到阴影根中。与每次重新解析 HTML 字符串相比，这种方式更快。
const tpl = document.createElement('template');
tpl.innerHTML = '<p>Reusable content</p>';
class MyCard extends HTMLElement {
constructor() {
super();
const root = this.attachShadow({ mode: 'open' });
root.appendChild(tpl.content.cloneNode(true));
}
}
customElements.define('my-card', MyCard);什么是插槽
<slot> 是阴影树中的占位符，元素自身的子内容（即其轻量 DOM）会投影到这里。这样，用户就可以将自定义内容传入您的组件。
// Shadow root markup:
// <div class="box"><slot></slot></div>
// Usage:
// <my-card>This text fills the slot</my-card>默认插槽内容
放置在 <slot> 标签之间的内容充当后备内容。只有当用户没有提供匹配内容时，它才会显示。
// <slot>No content provided</slot>
// If the user supplies children, they replace the fallback.命名插槽
通过使用 name 属性，可以同时使用多个插槽。轻量 DOM 子节点通过 slot 属性指定目标插槽。
// Shadow root:
// <header><slot name="title"></slot></header>
// <section><slot name="body"></slot></section>
// Usage:
// <my-card>
// <h2 slot="title">Hello</h2>
// <p slot="body">World</p>
// </my-card>默认（未命名）插槽
没有 name 的插槽就是默认插槽。任何没有 slot 属性的子节点都会投影到这里。您可以将一个默认插槽与多个命名插槽混合使用。
// <slot name="header"></slot>
// <slot></slot> <!-- default: catches everything else -->设置插槽内容的样式
使用 ::slotted() 伪元素，可以在阴影样式内部设置投影子节点的样式。它只能匹配顶层的插槽节点。
// Inside shadow <style>:
// ::slotted(p) { margin: 0; color: gray; }
// ::slotted(h2) { font-size: 1.5rem; }slotchange 事件
当分配给插槽的节点发生变化时，插槽会触发 slotchange 事件。请监听此事件，以便在用户添加或移除投影内容时作出响应。
const slot = this.shadowRoot.querySelector('slot');
slot.addEventListener('slotchange', () => {
const nodes = slot.assignedNodes();
console.log('slot now has', nodes.length, 'nodes');
});模板与插槽配合使用
模板只需定义一次结构；插槽则允许使用者注入自己的内容，使该结构更加灵活。两者结合后，可以构建简洁、可复用且可自定义的网页组件。
快速检查
检验您对模板和插槽的理解。
回顾
您已经学会了模板和插槽：
<template>在.content中保存不会立即生效且可复用的标记。- 插入前使用
cloneNode(true)进行克隆。 <slot>会将轻量 DOM 投影到阴影树中。- 命名插槽使用
name以及子节点的slot属性。 ::slotted()设置投影节点的样式；slotchange响应更新。
您已经完成网页组件的学习。接下来学习 Intersection Observer API。
常见问题解答
「模板与插槽」课时是免费的吗？
是的 — 「模板与插槽」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。
「模板与插槽」这节课中我会学到什么？
使用 template 和 slot 组合组件。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 JavaScript Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「模板与插槽」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 JavaScript Academy 课中编写并运行代码吗？
能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。