什么是 Custom Elements
Custom Elements 是 Web Components 标准中的一部分，它提供了一种自定义 DOM 元素的方法，使开发者能够创造出自己的 HTML 标签，并且能够对其进行自定义的行为、属性以及样式的定义。
Custom Elements 下的模板渲染
模板渲染是前端开发过程中一个难点，而 Custom Elements 则能够解决完成模板渲染的问题。在 Custom Elements 中，可以使用 HTML5 的模板标签来定义模板，因此我们可以使用 JavaScript 动态的将模板与 Custom Elements 绑定，实现模板渲染。
创建 Custom Elements
通过 window.customElements.define 方法可以注册 Custom Elements ， 在自定义元素中使用 HTML5 中的模板标签定义所需的DOM结构。
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
----- -------- - ------------------------------------------------------
----- -------- - ---------------------------------
------------------- ----- ------ -------------------------
-
-
------------------------------------------------- -----------------上述代码中，首先创建了一个 MyCustomElement 类，然后在该类构造函数中，使用 document.getElementById() 方法获取到指定的 HTML 模板，并通过 appendChild() 方法，将该模板加入到 Custom Elements 的 shadow root 中.
封装 Custom Elements
为使 Custom Elements 使用更贴合于业务,我们可以向其内部添加处理 DOM 逻辑的代码，在 Custom Elements 内封装一个方法实现数据的托管，从而完成与模板的渲染。
-- -------------------- ---- -------
----- ------- ------- ----------- -
------------- -
--------
----- -------- - -----------------------------------
------------------ - -
-------
-------- -
------- ---- --
-------- -----
------- --- ----- ------
-
------- -
------------ -----
-
--------
---- ----------------
----- ---------------------- -----
---- -------------------
------
--
------------------------ ------------------------------------------------------
-
--- --------- ------- ---- -- -
---------------------------------------------------- - -------
-------------------------------------------------- - -----
-
-
----------------------------------------------- ---------使用 set message 方法，来更新 Custom Elements 中的内容。
Custom Elements 模板渲染的优势
Custom Elements 提供了一种可扩展性强的模板渲染方案，通过模板标签的打造，Web 开发者能够更加灵活，更快构建 Web 应用程序。
总结
从本文中可以看出，Custom Elements 不仅可以扩展 HTML 元素本身的功能，还能吸收模板渲染方面的优点并应用其中，这意味着在设计 Web 应用程序的时候，Custom Elements 可以帮助开发者更加轻松地进行模板渲染，且型号强大、灵活性高。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6481de3348841e989415428b