在现代网页设计中，网页将不再是一些简单的静态网页，而是需要更多的互动和动态效果。为了达到这个目的，Web 开发者需要使用许多不同的技术和工具，其中之一就是 Custom Elements。
Custom Elements 提供了一种构建可重复使用、独立于应用程序代码的 Web 组件的方式。这些组件可以包含单独的标记、样式和行为，并可以在不同页面和应用程序之间共享和重用。
在这篇文章中，我们将详细探讨如何使用 Custom Elements 构建可定制化的 Web 组件，包括如何定义、注册、使用和传递属性。同时，我们还会提供一些示例代码来帮助你更好地理解。
定义 Custom Elements
Custom Elements 的定义方式很简单。我们可以通过 class 或者 prototype 来定义一个新的元素。下面我们通过 class 来定义一个可复用的社交分享组件：
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------------------- -
-------------- - -
-- -------- ----------------- ----------------------
-- -------- ----------------- --------------------
-- -------- ----------------- ----------------------
--
-
-在这个例子中，我们定义了一个名为 SocialShare 的新元素，该元素继承自 HTMLElement，并重写了 connectedCallback() 方法。在 connectedCallback() 中，我们简单地将一些基本的 HTML 内容插入到了组件中。
注册 Custom Elements
定义 Custom Elements 没有实际效果，我们还需要将它注册到浏览器中。我们可以使用 customElements.define() 方法来注册一个新的 Custom Element。
customElements.define('social-share', SocialShare);在这个例子中，我们使用 customElements.define() 方法注册了名为 social-share 的新元素，并将其绑定到 SocialShare 类上。social-share 就是我们将该元素在 HTML 中使用时的名称。
使用 Custom Elements
注册完成后，我们就可以在 HTML 中使用该 Custom Element 了：
<social-share></social-share>
当我们将上述代码插入到网页中时，就会自动呈现为我们在 SocialShare 类中定义的内容。
传递属性
我们还可以向 Custom Element 传递属性，以便更好地定制组件。以我们之前定义的 SocialShare 组件为例，我们可以传递一个 title 属性，用于设置分享链接的标题。
首先，我们需要在组件中定义一个 title 属性，并更新组件呈现的内容：
-- -------------------- ---- -------
----- ----------- ------- ----------- -
------ --- -------------------- -
------ ----------
-
------------------- -
-------------- - -
-- -------- ----------------- ----------------------- ------------
-- -------- ----------------- ---------------------- -----------
-- -------- ----------------- ----------------------- ------------
--
-
------------------------------ --------- --------- -
-- ----- --- -------- -
---------------------------
-
-
------------------ -
----- ----- - -------------------------------------
------------------ -- -------------- - --------- ------------------------------------
-
-
--------------------------- - ---------- -
------ ---------------------------- - --------------
-在这个例子中，我们定义了 observedAttributes 数组，指定需要监听的属性名称。然后，我们在 connectedCallback() 方法中使用了 this.title 属性来更新链接的显示内容。最后，我们还定义了一个 attributeChangedCallback() 方法，在属性变化时更新标题，同时我们还定义了一个简单的方法 String.prototype.capitalize() 来处理字符串首字母大写。
接下来，我们通过以下 HTML 代码来传递一个 title 属性：
<social-share title="My Page"></social-share>
当我们在页面中插入上面的代码时，SocialShare 组件将会呈现为三个分享链接，其标题内容为“My Page Facebook”、“My Page Twitter”和“My Page LinkedIn”。
结论
Custom Elements 是一种构建可定制化的 Web 组件的强大工具。在本文中，我们已经详细介绍了它的定义、注册、使用和属性传递方式。希望这篇文章对你有所帮助，让你更好地使用 Custom Elements 以构建更好的 Web 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f37977e1e8e99bfaf75b65