Custom Elements 是 Web Components 规范的一部分，其可以帮助开发者创建自定义的 HTML 元素并对其进行封装和组合，从而实现更加易于维护和扩展的 Web 应用。而 Custom Elements 的 template 机制则可以让我们更加方便地定义和管理元素的内部结构。
什么是 template？
在之前的 Web 开发中，通常我们会使用字符串拼接或者通过 JavaScript 创建和插入 DOM 元素来操纵文档结构。但是这种方式的缺点是很难维护和复用，特别是当页面结构较为复杂时，代码会变得非常混乱。
为了解决这个问题，HTML5 引入了 template 元素。template 是一种新的 HTML 元素，它定义了一个包含 HTML 内容的模板，但是这些内容在文档加载时不会被渲染。在 JavaScript 代码中，我们可以通过 cloneNode() 方法复制 template 中的内容并插入到文档中，从而实现对模板的动态渲染。
下面是一个简单的 template 示例：
<template id="my-template">
<div class="card">
<h1 class="title"></h1>
<p class="content"></p>
</div>
</template>template 在 Custom Elements 中的应用
在 Custom Elements 中，使用 template 可以帮助我们更加方便地组织和管理元素的内部结构。例如，我们可以将元素的模板定义在模板中，然后在元素的定义中引用模板，从而实现对元素结构的动态渲染。
为了实现这个功能，Custom Elements 规范为每个元素提供了一个 createShadowRoot() 方法。这个方法可以创建一个 Shadow DOM，这个 Shadow DOM 就是元素内部的跨浏览器、跨平台、隔离的 DOM 子树。
在 createShadowRoot() 方法中，我们可以引用 template 元素，并使用内置的 content 属性来获取 template 中的内容。例如，下面是一个示例：
-- -------------------- ---- -------
--------- -------------------------
-------
----- -
------- --- ----- ------
-------- -----
-
--------
---- -------------
--- -------------------
-- --------------------
------
-----------
--------
----- --------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
----- -------- - -----------------------------------------------
----- ------- - ---------------------------------
-------------------------------------
-- ------
-
-
----------------------------------- -----------
---------在这个示例中，我们首先定义了一个名为 my-element-template 的 template，并在其中定义了一个 .card 类型的样式和一个元素内部结构。然后在定义 MyElement 类时，我们会引用这个 template 并将其内容复制到元素的 Shadow DOM 中。
最终，我们可以通过以下代码在文档中使用这个新的元素：
<my-element>
<h1 slot="title">Hello</h1>
<p slot="content">World</p>
</my-element>在这个示例中，我们使用了新的 slot 元素来为元素的内部结构提供了具体的内容。其中，slot 元素允许我们在定义时指定具体的位置，并在元素的内部结构中使用 slot 元素的 name 属性来引用这个位置。通过这种方式，我们可以轻松地实现对元素内部结构的管理和组合。
总结
Custom Elements 的 template 机制提供了一种方便的方式来定义和管理元素的内部结构。通过在 Shadow DOM 中引用 template 元素并使用 slot 元素，我们可以轻松地实现对元素内部结构的动态渲染和组合。这样的方式大大简化了 Web 开发中的代码管理和维护工作，允许我们更加方便地创建复杂的、易于维护的 Web 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e824bef6b2d6eab339a1ed