Web 开发中，自定义元素 (Custom Elements) 是一种非常强大的技术，它让开发者能够创建自己的 HTML 元素，实现更好的组件化和可复用性。但在使用 Custom Elements 时，如果不善于利用模板，就难以发挥出其真正的价值。本文将介绍如何在 Custom Elements 中正确地使用模板，以便更好地实现组件化。
为什么要使用模板？
Custom Elements 的本质是创建新的 HTML 元素，而模板则是为这些元素提供初始内容。模板和元素之间存在一定的关联，当一个自定义元素被创建时，其模板中的内容也会被插入到文档中相应的位置上。
使用模板的好处主要有两点：
- 让元素的初始化更加灵活：在模板中可以预设元素的初始状态，包括子元素、属性和事件等。
- 实现更好的可重用性：通过定义通用的模板，可以让多个自定义元素共享同样的 UI 和行为。
如何在 Custom Elements 中使用模板？
定义模板
在定义 Custom Elements 的时候，可以使用模板来为其提供一些初始 HTML。
以下是定义一个自定义元素并插入模板的代码示例：
-- -------------------- ---- -------
--------- -------------------------
-------
- -
------ ----
-
--------
--------- - -- -------------
-----------
--------
----- --------- ------- ----------- -
------------- -
--------
----- -------- - -----------------------------------------------
----- ------- - --------------------------------- -- ---------
------------------- ----- ------ ------------------------
-
---
-
----------------------------------- -----------
---------在上面的代码中，首先定义了一个 id 为 my-element-template 的模板。这个模板包含了一个样式块和一个使用 {{name}} 占位符的段落，用来显示元素在页面上的初始内容。在 Custom Elements 的定义函数中，通过 getElementById() 方法获取到了这个模板，并使用 content.cloneNode(true) 方法将它复制了一份（这里的 true 参数代表复制所有子节点，包括那个神奇的 {{name}} 占位符）。接下来，借助了 Shadow DOM 技术，将复制后的模板作为元素的根节点插入到了 Shadow DOM 中。
处理模板中的数据绑定
模板中的数据绑定，如上述的 {{name}} 占位符，不会被浏览器直接插入到文档中，而是需要在 Custom Elements 中进行处理。
可以通过为元素定义一个 render() 方法，在该函数中获取传入元素的属性或状态数据，并将其填充到模板中的占位符里面。
以下是添加 render() 方法，并修改占位符内容的代码示例：
-- -------------------- ---- -------
--------- -------------------------
-------
- -
------ ----
-
--------
--------- - -- ----- ----------------------
-----------
--------
----- --------- ------- ----------- -
------------- -
--------
----- -------- - -----------------------------------------------
----- ------- - ---------------------------------
------------------- ----- ------ ------------------------
-
------------------- -
--------------
-
-------- -
----- -------- - ---------------------------------------
------------------ - --------------------------
-
-
----------------------------------- -----------
---------
----------- -------------------------在上面的代码中，我们添加了一个 connectedCallback() 方法，在元素连接到文档时调用。在该方法中，我们调用了 render() 方法，从而在占位符 <span> 中填充了通过 getAttribute() 方法获取到的 name 属性。
处理模板中的事件响应
在模板中定义的事件，也需要在 Custom Elements 中进行响应，才能实现元素的正确交互。
如果是对自身元素的事件进行响应，可以直接为 Custom Elements 添加相应的事件监听器。但如果需要监听子元素的事件，则需要借助 querySelector() 或 getElementById() 等方法获取子元素的引用，再为其添加事件监听器。
以下是在 Custom Elements 中处理模板中事件响应的代码示例：
-- -------------------- ---- -------
--------- -------------------------
-------
- -
------ ----
-
--------
--------- - -- ----- ----------------------
------- --------------------------- -------------
-----------
--------
----- --------- ------- ----------- -
------------- -
--------
----- -------- - -----------------------------------------------
----- ------- - ---------------------------------
------------------- ----- ------ ------------------------
-
------------------- -
--------------
--------------------------------------------------------------------------- -- -- -
----- ---- - -------------- ----- - --- --------
-- ------ -
------------------------- ------
--------------
-
---
-
-------- -
----- -------- - ---------------------------------------
------------------ - --------------------------
-
-
----------------------------------- -----------
---------
----------- -------------------------在上面的代码中，我们在模板中添加了一个按钮元素，用于更改元素的名称。在 Custom Elements 中，我们通过 getElementById() 方法获取到了这个按钮的引用，并为它添加了一个事件监听器。当按钮被点击时，会弹出一个对话框要求用户输入新的 name 属性，并调用 setAttribute() 方法更新该属性。最后，我们又一次调用 render() 方法，以更新元素的内容。
总结
使用模板可以让 Custom Elements 的初始化更加灵活，实现更好的可重用性。在使用模板时，需要关注数据绑定和事件响应等方面。通过本文的介绍，相信读者可以更好地掌握这一技术，实现更好的 Web 组件化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b29f8968c7c53b0d8657f