在前端开发中，Custom Elements 是一个非常实用的功能，可以让我们创建自定义的 HTML 标签，通过自己编写的 JavaScript 代码来控制标签的行为和渲染内容。但是在实际应用中，有时候我们需要从外部数据源动态加载数据，这时候就需要一些特殊的技巧和方法了。
Custom Elements 简介
Custom Elements 是 Web Components 的一部分，它是一项Web API，可以让我们创建自定义的 HTML 标签和元素，这些元素可以被 JavaScript 应用程序所使用。Custom Elements 通过提供新的类来实现自定义元素，并通过构造函数和原型方式来定义元素的行为。
下面是 Custom Elements 的一个简单示例代码：
class MyElement extends HTMLElement {
connectedCallback() {
this.innerHTML = 'Hello, World!';
}
}
customElements.define('my-element', MyElement);以上代码定义了一个名为 my-element 的自定义元素，并在 <body> 标签中添加了一个 <my-element> 标签，其内容为 'Hello, World!'。这个自定义元素的行为是通过构造函数 MyElement 中的 connectedCallback 方法定义的。在元素被添加到文档中时，浏览器会自动调用该方法。
动态加载外部数据源
有时候我们需要从外部加载数据来填充自定义元素的内容，这时候就需要使用一些特殊的技巧和方法。在 Custom Elements 中实现这一功能的方法可以有多种，这里我们介绍两种：
使用 fetch() 方法加载数据
fetch() 方法是从网络异步获取资源的现代API，它可以使用 promise 实现异步请求，支持跨域请求和错误处理。我们可以使用 fetch() 方法从外部数据源加载数据，并在 Custom Elements 内容区域中渲染数据。
以下是一个示例代码：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------------- -
-------------------------------------
-------------- -- ----------------
---------- -- -
-------------- - -------------------- -- ------------------------------------
--
------------ -- ----------------------
-
-以上代码定义了一个名为 my-element 的自定义元素，并使用 fetch() 方法从 http://example.com/data.json URL 中加载数据。当数据加载完成后，使用 innerHTML 属性将数据渲染到元素内部。
使用 XMLHttpRequest 对象加载数据
XMLHttpRequest 对象是一个 API，它提供了与服务器交互的客户端功能，可以用于异步加载数据。它支持跨域请求和错误处理，但与 fetch() 方法不同，它使用回调函数实现异步处理。
以下是一个使用 XMLHttpRequest 对象加载外部数据的示例代码：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------------- -
----- --- - --- -----------------
---------------------- - -- -- -
-- --------------- --- - -- ---------- --- ---- -
----- ---- - -----------------------------
-------------- - -------------------- -- ------------------------------------
-
--
--------------- --------------------------------
-----------
-
-以上代码与 fetch() 方法的示例代码相似，也是将数据加载到 Custom Elements 内部，在元素渲染时为其添加一个回调函数，并使用 XMLHttpRequest 对象从外部数据源获取数据。当数据加载完成后，使用 innerHTML 属性将数据渲染到元素内部。
结论
Custom Elements 是一项非常实用的 Web API，可以让我们创建自定义的 HTML 标签和元素，控制标签的行为和渲染内容。在实际应用中，我们经常需要从外部数据源加载数据来填充 Custom Elements 的内容区域，这时候我们可以使用特殊的技巧和方法来完成这一功能。
本文介绍了两种方法：使用 fetch() 方法加载数据和使用 XMLHttpRequest 对象加载数据。这两种方法各有优缺点，开发者可以结合具体的应用场景进行选择。
以上是本文的全部内容，希望对您了解 Custom Elements 中如何实现外部数据源的动态加载有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6700d545c842884a45a87fbe