Web 组件和自定义元素是现代 Web 技术中最流行的概念之一，它们可以帮助构建可重用的组件和模块化应用程序。本文将介绍如何使用 Web Components 和 Custom Elements 构建可检索的 Web 应用程序，包括如何创建自定义元素、如何为自定义元素添加属性和事件、如何使用 Shadow DOM 将样式和 HTML 封装在组件内部，并且提供了一个示例代码。
什么是 Web Components？
Web Components 是一个包含多个技术的集合，它们允许我们创建可重用的组件和封装 Web 应用程序的视图和行为。Web Components 包含以下技术：
- Custom Elements：允许我们创建自定义 HTML 元素。
- Shadow DOM：允许我们将样式和 HTML 封装在组件内部，使其不受外部 CSS 样式的影响。
- HTML Templates：允许我们定义带有占位符的 HTML 片段，可以在 JavaScript 中进行替换并插入到 DOM 中。
创建自定义元素
要创建自定义元素，我们可以使用 window.customElements.define() 方法来定义一个新的 HTML 元素。在定义元素时，我们需要传递两个参数：元素名称和元素类，元素类必须是 HTMLElement 的子类。
-- -------------------- ---- ------- ----- --------- ------- ----------- - -- ------------- ------------- - -------- - -- ------------ ------------------- - -------------- - ------- -------- - - -- ---------- ------------------------------------------ -----------展开代码
上面的代码定义了一个名为 my-element 的自定义元素，并为该元素设置了一个初始内容。
添加属性和事件
在自定义元素中，我们可以为元素添加属性和事件。要添加属性，我们可以在元素类中定义 static get observedAttributes() 方法，并返回一个字符串数组，该数组包含要观察的属性名称。当指定的属性值发生更改时，attributeChangedCallback 方法将被调用。
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------ --- -------------------- - ------ --------- - ------------- - -------- - ------------------- - ------------------ - ------------------------------ --------- --------- - -- ----- --- ------- - ------------------ - - ------------ - ----- ---- - -------------------------- -------------- - ------- ---------- - - ------------------------------------------ -----------展开代码
在上面的代码中，我们为自定义元素添加了一个名为 name 的属性，并在元素的构造器、连接回调和属性更改回调中使用了这个属性。
要添加事件，我们可以在元素类中定义自定义事件并使用 CustomEvent 来触发该事件。
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- ------------------------------ ------------------------- - --------- - ---------------------- ----------------------- - -------- ----- --------- ----- ------- - -------- ------- ------- - ---- - - ------------------------------------------ -----------展开代码
在上面的代码中，我们定义了一个名为 my-event 的自定义事件，并在 onClick 方法中使用 dispatchEvent() 来触发该事件。
使用 Shadow DOM
使用 Shadow DOM 可以将样式和 HTML 封装在组件内部，以使其不受外部 CSS 样式的影响。要使用 Shadow DOM，我们需要在自定义元素类中使用 attachShadow() 方法创建一个 Shadow DOM，并将组件的 HTML 和样式添加到 Shadow DOM 中。
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- ----- ---------- - ------------------- ----- ------ --- -------------------- - - ------- ----- - -------- ------ ---------- ----- - ------ - ----------------- ----- ------ ------ ------- ----- -------- ---- -------------- ---- ------- -------- - -------- ------------- ------------ -- ------------------------------------------------------------ ------------------------- - --------- - ------------------------ - - ------------------------------------------ -----------展开代码
在上面的代码中，我们创建了一个 Shadow DOM 并添加了一个包含样式和 HTML 的 button 元素。
示例代码
下面是一个使用 Web Components 和 Custom Elements 构建可检索的 Web 应用程序的示例代码。
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ----------------- ---- --------------- ------- ------ -------------- ---- ------------ ----------------- -------------- --------------- --------------- --------------- ------------------ ------------------ -------- ----- -------------- ------- ----------- - ------------- - -------- ----- ---------- - ------------------- ----- ------ --- -------------------- - - ------- ----- - -------- ------ - ----- - ------ ----- -------- ---- ---------- ----- ------- --- ----- ----- -------------- ---- - -- - ---------------- ----- ------- -- -------- -- - -- - -------- ---- ---------- ----- -------------- --- ----- ----- - ------------- - -------------- ----- - -------- ------ ----------- ------------------------ --------- -- ---------- - ------------------------------- ----------- - ---------------------------------- ----------- - -------------------------- ------------------------------------- ------------------------- ---------------- - --------- - ------------------------------- - ------------- - -------------------- - --- ----- ----- - --- ------------- ----- ----------- ------------ -- ----------------------------- ------------- -- ------------------------------ - - ----------------------------------------------- ---------------- --------- ------- -------展开代码
上面的代码定义了一个名为 searchable-list 的自定义元素，它包含一个带有输入框和列表的组件。在输入框中输入文本时，列表将根据匹配项过滤。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bac8a9306f20b3a69d7173
