什么是 Custom Elements？
Custom Elements 是浏览器内置的 Web Components API 的一部分。它允许您定义自己的 HTML 元素，从而更好地组织和封装您的 JavaScript 代码。使用 Custom Elements，您可以创建可重用的、自定义的元素，这些元素可以在任何网站上使用，并且可以与标准 HTML 元素一样使用。
如何使用 Custom Elements？
要创建一个 Custom Elements，您需要创建一个类，并继承 HTMLElement。在这个类中，您将定义元素的属性、方法和事件。然后，您需要使用 customElements.define() 方法注册您的自定义元素。
下面是一个示例 Custom Elements：
-- -------------------- ---- -------
----- --------------- ------- ----------- -
------------- -
--------
-- --- ----- -------- -- --- -------
------------------------------ ---------------
-
-- ------ - ------ ------
---------------- -
------------------- ---------
-
-- ------ - ------ ----- -------
---------- -
-------------------- -----------
-
-
-- -------- --- ------ -------
------------------------------------------ -----------------在这个示例中，我们定义了一个名为 MyCustomElement 的 Custom Element，它继承自 HTMLElement。我们添加了一个 click 事件监听器和一个名为 myCustomMethod 的自定义方法。最后，我们使用 customElements.define() 方法注册了这个元素。
如何使用 Ajax 或 Fetch 请求数据？
在 Custom Elements 中，您可以使用 Ajax 或 Fetch API 请求数据并渲染内容。
下面是一个使用 Fetch 请求数据并渲染内容的示例 Custom Element：
-- -------------------- ---- -------
----- ---------------- ------- ----------- -
------------- -
--------
------------------- ----- ------ ---
-
----- ------------------- -
----- -------- - ----- ------------------------------------------------------
----- ---- - ----- ----------------
----- -------- - ----------------------------
-------------------- - -----------
--------------------------------------
-
-
------------------------------------------- ------------------在这个示例中，我们定义了一个名为 MyCustomElement2 的 Custom Element。我们使用 attachShadow() 方法来创建一个 Shadow DOM，并在 connectedCallback() 方法中使用 Fetch API 请求数据。我们使用 createElement() 方法创建一个新的 p 元素，然后设置它的文本内容为从 API 中检索的数据。
最后，我们使用 shadowRoot.appendChild() 方法将该元素添加到 Shadow DOM 中。
总结
Custom Elements 是构建 Web Components 的重要部分之一。通过 Custom Elements，您可以定义可重用的、自定义的 HTML 元素，这些元素可以与其他 HTML 元素一样使用。您可以使用 Ajax 或 Fetch API 请求数据并渲染内容，让您的 Custom Elements 更加强大和灵活。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6488245848841e98946a59c9