#HTML 的 <template> 标签
请查看 HTML 元素帮助手册 了解更多 HTML 元素。
HTML 的 <template> 元素是 Web Components 技术套件的一部分，用于自定义组件的模板。可以使用 <slot> 元素在模板内定义可变的内容插槽。
#属性
请查看 HTML 元素的全局属性 了解 HTML 元素的全局属性。
#示例
<!-- 自定义组件 -->
<template id="user-card">
<style>
.card {
border: 1px solid #ccc;
border-radius: 8px;
padding: 16px;
margin: 10px;
max-width: 300px;
}
.name {
font-weight: bold;
font-size: 1.2em;
}
</style>
<div class="card">
<div class="name">
<!-- 命名为 username 的插槽 -->
<slot name="username">默认用户名</slot>
</div>
<div class="email">
<!-- 命名为 email 的插槽 -->
<slot name="email">默认邮箱</slot>
</div>
<div>
<!-- 未命名的默认插槽 -->
<slot>其他信息可以放在这里</slot>
</div>
</div>
</template>
<!-- 使用自定义组件 -->
<user-card>
<!-- 插入 username 插槽 -->
<span slot="username">Plan C</span>
<!-- 插入 email 插槽 -->
<span slot="email">[email protected]</span>
<!-- 插入默认插槽 -->
<p>这是一位优秀的工程师，拥有 N 年工作经验。</p>
</user-card>
<slot>