前言
在前端开发中，我们经常需要创建自定义的 HTML 元素。这些元素可以扩展现有的 HTML 元素，或者创建全新的元素。Custom Elements API 是一种用于创建自定义元素的标准化方法。它允许我们创建一个新的元素，并定义它的行为和样式。
在本文中，我们将介绍如何使用 Custom Elements API 创建自定义元素，并实现私有部分并在外部公开的方法。
什么是 Custom Elements？
Custom Elements 是一个 Web 标准，它允许开发者创建自定义 HTML 元素。它提供了一个 API，使得开发者可以定义元素的行为和样式。Custom Elements API 由两个主要部分组成：CustomElementRegistry 和 HTMLElement。
CustomElementRegistry 是一个全局的注册表，它允许开发者注册自定义元素，并为它们分配一个名称。HTMLElement 是一个基类，它允许开发者定义自定义元素的行为和样式。
如何创建自定义元素？
要创建自定义元素，我们需要使用 CustomElementRegistry 的 define() 方法。这个方法接受两个参数：元素名称和元素类。
元素名称必须包含一个连字符（-），以避免与现有的 HTML 元素名称冲突。元素类必须继承自 HTMLElement。
下面是一个简单的示例，演示如何创建一个自定义元素：
----- --------- ------- ----------- -
------------- -
--------
-------------- - ------- --------
-
-
----------------------------------- -----------在上面的代码中，我们定义了一个名为 MyElement 的自定义元素，并将其注册到 CustomElementRegistry 中。该元素继承自 HTMLElement，它的构造函数设置了元素的 innerHTML 属性为 "Hello, World!"。
如何实现私有部分？
私有部分是指在元素内部定义的方法和属性，它们不应该被元素外部的代码访问。为了实现私有部分，我们可以使用 Symbol 类型来定义私有属性和方法。
Symbol 是一种新的原始数据类型，它可以用来创建唯一的属性和方法名称。由于 Symbol 是唯一的，所以我们可以使用它来创建私有属性和方法，以避免与其他代码冲突。
下面是一个示例，演示如何使用 Symbol 定义私有属性和方法：
----- ------------- - ------------------------
----- --------------- - --------------------------
----- --------- ------- ----------- -
------------- -
--------
--------------------- - -------
-
----------------- -
----------------------
-
-------------- -
----------------------
----------------------
-
-
----------------------------------- -----------在上面的代码中，我们使用 const 关键字和 Symbol() 方法创建了两个私有变量：privateMethod 和 privateProperty。我们还定义了一个公共方法 publicMethod()，该方法调用了私有方法 privateMethod()。
如何在外部公开？
虽然我们可以使用 Symbol 来定义私有属性和方法，但是在某些情况下，我们可能需要在外部公开它们。为了实现这一点，我们可以使用 getter 和 setter。
getter 和 setter 是一种特殊的方法，它们允许我们在访问属性时执行代码。getter 用于获取属性值，而 setter 用于设置属性值。
下面是一个示例，演示如何使用 getter 和 setter 在外部访问私有属性：
----- --------------- - --------------------------
----- --------- ------- ----------- -
------------- -
--------
--------------------- - -------
-
--- ---------------- -
------ ----------------------
-
--- --------------------- -
--------------------- - ------
-
-
----------------------------------- -----------在上面的代码中，我们使用 const 关键字和 Symbol() 方法创建了一个私有变量 privateProperty。我们还定义了一个公共属性 publicProperty，它使用 getter 和 setter 访问私有属性。
总结
Custom Elements API 是一个用于创建自定义 HTML 元素的标准化方法。它允许我们创建一个新的元素，并定义它的行为和样式。为了实现私有部分，我们可以使用 Symbol 来定义私有属性和方法。为了在外部公开私有属性，我们可以使用 getter 和 setter。
在实际开发中，我们可以使用 Custom Elements API 创建自定义元素，并实现私有部分并在外部公开，以提高代码的可维护性和安全性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660a1a5ed10417a2228f0c68