HTML模板元素：<template> 与 <slot>

学习使用<template>定义可复用内容，结合<slot>实现灵活的Web组件。 · 难度：入门 · +15XP

一、<template> 基础

<template>元素用于声明HTML片段，不会在页面加载时渲染，但可通过JavaScript克隆并插入到DOM中。

<template id="myCard">
  <div class="card">
    <h3>标题</h3>
    <p>描述文字</p>
  </div>
</template>

二、使用JavaScript复制模板

const template = document.getElementById('myCard');
const clone = template.content.cloneNode(true);
document.body.appendChild(clone);

三、自定义元素与<slot>

结合customElements.define和<slot>可以创建可替换内容的组件：

<template id="userCard">
  <div>
    <slot name="avatar">默认头像</slot>
    <slot name="name">默认名字</slot>
  </div>
</template>
<user-card>
  <img slot="avatar" src="user.png">
  <span slot="name">张三</span>
</user-card>

四、完整组件示例

class UserCard extends HTMLElement {
  constructor() {
    super();
    const template = document.getElementById('userCard');
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.appendChild(template.content.cloneNode(true));
  }
}
customElements.define('user-card', UserCard);

练习提示：在starter_code中修改模板，添加一个<slot name="bio">用于显示用户简介，并在自定义元素中提供一段简介文字。