Web Components 是一种新的 Web 技术，它允许开发者创建自定义的 HTML 元素，这些元素可以被重复使用，并且具有良好的封装性和可维护性。其中，模板标记和条件渲染是 Web Components 中非常重要的特性，本文将详细介绍它们的用法和实现。
模板标记
模板标记是 Web Components 中定义自定义元素的核心特性之一。它允许开发者定义一个包含 HTML 元素的模板，并将其作为自定义元素的结构。这样，当自定义元素被创建时，它的内部结构就会根据模板进行初始化。
下面是一个使用模板标记的自定义元素示例：
-- -------------------- ---- -------
--------- -----------------
-----
------------------
---------------
------
-----------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
----- -------- - -----------------------------------------------
----- ---------- - ------------------- ----- ------ ---
-------------------------------------------------
-
-
----------------------------------- -----------
---------在上面的代码中，我们定义了一个包含 HTML 元素的模板，并将其 ID 设置为 my-template。然后，我们创建了一个自定义元素 my-element，并在其构造函数中使用 attachShadow 方法创建了一个 Shadow DOM，然后将模板的内容添加到其中。
通过使用模板标记，我们可以实现自定义元素的复用和可维护性。我们可以在一个 HTML 文件中定义多个模板，并在不同的自定义元素中使用它们，从而减少代码的重复和维护成本。
条件渲染
条件渲染是 Web Components 中实现动态 UI 的重要手段之一。它允许开发者根据不同的条件来动态地显示或隐藏 HTML 元素。
下面是一个使用条件渲染的自定义元素示例：
-- -------------------- ---- -------
-------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
----- ---------- - ------------------- ----- ------ ---
-------------------- - -
-----
------------------
------- --------------------------
-- -----------------------
------
--
----- --------- - ------------------------------------
----- ------- - -------------------------------------
----------------------------------- -- -- -
--------------------- - --------------------- --- ------ - ------- - -------
---
-
-
----------------------------------- -----------
---------在上面的代码中，我们创建了一个自定义元素 my-element，并在其构造函数中使用 attachShadow 方法创建了一个 Shadow DOM，并在其中添加了一个按钮和一段内容。然后，我们使用 querySelector 方法获取按钮和内容的引用，并在按钮的点击事件中切换内容的显示状态。
通过使用条件渲染，我们可以实现动态的 UI，使用户能够根据自己的需求来展示或隐藏不同的内容。
总结
Web Components 中的模板标记和条件渲染是实现自定义元素的重要特性。通过使用模板标记，我们可以实现自定义元素的复用和可维护性；通过使用条件渲染，我们可以实现动态的 UI，使用户能够根据自己的需求来展示或隐藏不同的内容。在实际开发中，我们应该充分利用这两个特性，以提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658bfacbeb4cecbf2d14bbdd