是否有Web Component API可让自定义元素具备Template标签的行为特性？

Web Component并没有专门提供直接复刻<template>行为的API，但你可以通过自定义元素的样式控制和可选的文档片段封装，轻松实现和<template>完全一致的表现——即元素被浏览器解析，但默认不渲染到页面上，同时内部内容可以被后续复用。

实现步骤与示例 #

1. 核心：让自定义元素默认隐藏

<template>的核心特性之一是默认不渲染，这可以通过给自定义元素设置display: none实现，有两种方式：

方式一：在自定义元素类内设置样式

class MyCustomTemplate extends HTMLElement {
  constructor() {
    super();
    // 直接让元素本身不显示
    this.style.display = 'none';
  }
}

// 注册自定义元素
customElements.define('my-custom-template', MyCustomTemplate);

方式二：通过全局CSS控制

/* 全局样式中设置自定义元素默认隐藏 */
my-custom-template {
  display: none;
}

2. 模拟<template>的content属性（可选）

如果需要像原生<template>那样，通过content属性获取内部的文档片段（方便后续克隆复用），可以在构造函数里把自定义元素的子节点转移到文档片段中：

class MyCustomTemplate extends HTMLElement {
  constructor() {
    super();
    this.style.display = 'none';
    
    // 创建文档片段，模拟template的content属性
    this.content = document.createDocumentFragment();
    // 将所有子节点移到文档片段中
    while (this.firstChild) {
      this.content.appendChild(this.firstChild);
    }
  }
}

customElements.define('my-custom-template', MyCustomTemplate);

使用示例

<!-- 自定义模板元素，不会渲染到页面 -->
<my-custom-template>
  <div class="card">
    <h3>自定义模板内容</h3>
    <p>这是来自自定义模板的内容</p>
  </div>
</my-custom-template>

<script>
// 获取自定义模板并克隆内容插入页面
const template = document.querySelector('my-custom-template');
const clone = document.importNode(template.content, true);
document.body.appendChild(clone);
</script>

效果说明 #

• 自定义的<my-custom-template>会被浏览器正常解析，但默认不会在页面上显示。
• 内部的HTML结构会被保留，通过content属性可以获取文档片段，克隆后即可插入DOM进行渲染，和原生<template>的使用方式完全一致。

内容的提问来源于stack exchange，提问作者inux