快速入门 Web Components: 使用原生 JS 创建自定义组件

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

Web Components 是一项全新的 Web 技术标准,它可以让我们更轻松地开发可重用的、独立的 UI 组件。这些组件可以是完全自定义的,并且可以在任何现代浏览器中使用。本文将介绍如何使用原生 JS 创建自定义 Web Components,并提供实用的示例代码,帮助你快速入门。

Web Components 的基本组成部分

在介绍如何创建自定义 Web Components 之前,先来了解一下 Web Components 的基本部分:

Custom Element

Custom Element 是 Web Component 的核心部分,它是一个完全自定义的 HTML 标签。通过 Custom Element,你可以创建自己的标签,并定义其行为和样式。例如,你可以创建一个名为 my-button 的 Custom Element,它可以扩展 HTMLButtonElement 来定义一个新的按钮。

Shadow DOM

Shadow DOM 允许你将自定义的 HTML 和 CSS 封装在 Custom Element 内部。它可以让你的组件具有更好的隔离性和封装性,避免样式和事件冲突。

HTML Templates

HTML Templates 是一个可重用的 HTML 片段。在 Web Components 中,你可以使用 HTML Templates 来定义 Custom Element 的结构和内容,而不需要将其硬编码到 JavaScript 中。

HTML Imports (已废弃)

HTML Imports 提供了一种将 HTML 模板和资源导入 Web 页面的方式。不过,HTML Imports 已被废弃,我们可以使用 ES6 的 import 和 export 或者 Webpack 等现代工具代替。

下面,让我们使用这些基本部分来创建一个简单的 Web Component。

创建简单的 Custom Element

首先,我们需要创建一个完全自定义的 HTML 标签(Custom Element)。原生 JS 提供了一个非常简单的方法来创建 Custom Element,即 CustomElementRegistry.define() 方法。

----- -------- ------- ----------- -
  ------------- -
    --------
  -

  ------------------- -
    -------------- - ------ -----
  -
-

---------------------------------- ----------

代码解释:

  • 首先,我们使用 class 来定义一个 MyButton 类,并继承自 HTMLElement。
  • 我们在 MyButton 类中定义了构造函数和 connectedCallback 方法。constructor() 函数负责传递参数并初始化组件,而 connectedCallback() 方法则在 Custom Element 首次连接到文档后被调用。在本例中,我们在 connectedCallback() 方法中设置了按钮的文本。
  • 最后,我们使用 customElements.define() 方法来注册 Custom Element。该方法接受两个参数:第一个参数是 Custom Element 的名称,第二个参数是定义 Custom Element 的类。

现在,我们已经成功创建了一个 Custom Element,我们可以在任何 HTML 页面上使用它:

------
  -----------------------
-------

在 Custom Element 中使用 Shadow DOM

为了封装 Custom Element 内部的 HTML、CSS 和 JavaScript,我们可以使用 Shadow DOM 来创建一个范围(scoped)的 DOM 树。实现起来也非常简单,只需要将 Shadow DOM 附加在 Custom Element 上。

----- -------- ------- ----------- -
  ------------- -
    --------
    ----- ------ - ------------------- ----- ------ ---

    ----- ------ - ---------------------------------
    ------------------ - ------ -----

    ---------------------------
  -
-

---------------------------------- ----------

代码解释:

  • 我们在构造函数中使用 this.attachShadow() 方法来创建 Shadow DOM 范围。
  • 然后,我们创建了一个 button 元素,并将其文本设置为 'Click me!'。
  • 最后,我们将按钮添加到 Shadow DOM 范围中。

现在,我们已经成功创建了一个带有 Shadow DOM 的 Custom Element,我们可以在任何 HTML 页面上使用它:

------
  -----------------------
-------

在 Custom Element 中使用 HTML Templates

HTML Templates 允许我们将可重用的 HTML 片段封装到模板中,并在 Web Component 中重复使用。让我们来创建一个带有模板的 Custom Element:一个具有自定义消息的弹出式对话框。

----- ---------- ------- ----------- -
  ------------- -
    --------
    ----- ------ - ------------------- ----- ------ ---

    ----- -------- - ---------------------------------------
    ----- ----- - ------------------------------------- ------

    ----- ------- - -----------------------------
    ------------------------------------------- - --------
    ------------------------------------------------------- -- -- -
      -------------
    ---

    --------------------------
  -

  ------- -
    --------------
  -
-

------------------------------------ ------------

代码解释:

  • 首先,我们创建了一个名为 MessageBox 的 Custom Element。
  • 在构造函数中,我们使用 this.attachShadow() 方法来创建 Shadow DOM 范围。
  • 然后,我们从 HTML 模板中克隆对话框的结构。
  • 我们使用 this.getAttribute() 方法获取 Custom Element 的 message 属性,并将其插入到对话框中的 .message 元素中。
  • 最后,我们添加了一个 .close 类型的按钮,并使用 this.close() 方法来关闭对话框。

这里是我们使用的 HTML 模板:

--------- -----------------
  -------
    -------- -
      -------- -----
      --------- ------
      ---- --
      ------ --
      ------- --
      ----- --
      ------------ -------
      ---------------- -------
      ----------------- ------- -- -- -----
    -

    ------- -
      -------- -----
      --------------- -------
      ---------- ------
      ---------- ------
      -------- -----
      -------------- ----
      ----------------- ------
      ----------- ------- -- -- ---- --- --- ----
    -

    -------- -
      -------------- -----
      ---------- -------
      ------------ -----
    -

    ------ -
      ----------- ---------
      ------ -----
      ------- --------
    -

    ------------ -
      ------ -----
    -
  --------

  ---- ----------------
    ---- ---------------
      ---- ----------------------
      ---- ---------------------
    ------
  ------
-----------

现在,我们已经成功创建了一个带有模板的 Custom Element。我们可以在任何 HTML 页面上使用它,并传递 message 属性:

------
  ------------ --------------- ----------------------
-------

结论

Web Components 技术为前端开发者提供了一种全新的方法来定义可重用的、独立的 UI 组件。本文介绍了 Web Components 的基本部分,并提供了创建 Custom Element、使用 Shadow DOM 和 HTML Templates 的示例代码。通过本文的学习,你将掌握如何使用原生 JS 创建自定义 Web Components,为你的项目带来更强大的可复用性和扩展性。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/672a1620ddd3a70eb6cf28ee


猜你喜欢

  • 在 React 中使用 TypeScript 的优势和注意事项

    在前端开发中,React 是一种非常流行的 JavaScript 库,而 TypeScript 则是一种静态类型的 JavaScript 超集,它可以在开发时提供更好的类型检查和代码提示,从而提高代码...

    4 天前
  • 如何使用 Express.js 实现大规模文件下载

    在前端开发中,实现大规模文件下载是一个常见的需求。Express.js 是一个流行的 Node.js 框架,它可以帮助我们轻松地实现文件下载功能。本文将介绍如何使用 Express.js 实现大规模文...

    4 天前
  • Promise.then() 方法的正确使用姿势

    Promise.then() 方法是 JavaScript 中 Promise 对象的一种方法,它用于处理 Promise 对象的状态变化。在前端开发中,Promise.then() 方法被广泛应用于...

    4 天前
  • 无障碍模式下复选框和单选框的设计技巧

    在现代的网站和应用程序中,复选框和单选框是常见的用户界面元素。然而,这些元素在无障碍模式下可能会导致一些问题,因为屏幕阅读器用户可能无法正确地理解它们的状态。因此,在设计复选框和单选框时,需要遵循一些...

    4 天前
  • 如何设计一个健壮的 RESTful API 体系

    如何设计一个健壮的 RESTful API 体系 RESTful API 已经成为了现代 Web 应用程序的标准之一,它提供了一种简单和一致的方式来访问和操作 Web 资源。

    4 天前
  • 在 Jest 中使用 Babel 来处理 ES6 + 语法的最佳实践

    前言 在现代前端开发中,ES6+ 已经成为了主流的开发语言。然而,许多浏览器和环境仍然不支持 ES6+ 的语法,因此我们需要使用 Babel 来将 ES6+ 代码转换为 ES5 代码,以便它可以在更广...

    4 天前
  • ECMAScript 2019:更好的使用 JavaScript 字符串方法

    ECMAScript 2019 是 JavaScript 的最新版本,它为我们带来了许多新的功能和改进,其中包括对字符串方法的改进。在本文中,我们将深入探讨 ECMAScript 2019 中的字符串...

    4 天前
  • GraphQL 中的实体解析:优化 API 效率的关键

    GraphQL 是一种用于构建 API 的查询语言,它提供了一种更高效、更灵活的方式来获取数据。在 GraphQL 中,实体解析是优化 API 效率的关键之一。本文将介绍 GraphQL 中的实体解析...

    4 天前
  • 利用 Serverless 架构创建无服务器计算环境的好处

    随着云计算技术的快速发展,无服务器计算(Serveless Computing)成为了一种新兴的架构模式,它将计算资源的管理和部署全部交给云服务提供商,使得开发者可以专注于业务逻辑的实现,无需关注底层...

    4 天前
  • 使用 Web Components 带来的设计细节和技巧

    随着 Web 技术的不断发展,Web Components 成为了一种新的技术趋势。Web Components 是一种用于创建可重用组件的技术,它可以帮助开发者更加高效地构建 Web 应用程序。

    4 天前
  • 如何使用 ARIA 标准提高网站无障碍性

    在网页设计中,我们经常会考虑如何让网站更加美观、易用和快速响应。但是,在设计网站时,我们是否考虑到了无障碍性呢?无障碍性是指网站能够被所有人无障碍地访问和使用,包括身体残疾人士、老年人和语言障碍者等。

    4 天前
  • 使用 ECMAScript 2015 (ES6) 重构常见的开发模式

    使用ECMAScript 2015 (ES6) 重构常见的开发模式 ECMAScript 2015 (ES6) 是 JavaScript 的一个重要版本,它为前端开发者带来了许多新的特性和语法糖。

    4 天前
  • MongoDB 中使用 $rename 操作重命名字段的实现方式详解

    在 MongoDB 中,$rename 操作可以用于重命名一个文档中的字段。这个操作非常有用,因为它可以帮助我们对数据结构进行更好的管理和维护。在本文中,我们将详细介绍如何使用 $rename 操作实...

    4 天前
  • Headless CMS 开发中遇到的前端问题及解决方法

    随着移动互联网的普及和 Web 应用的不断发展,前端技术已经成为了 Web 开发中不可或缺的一部分。而 Headless CMS(无头 CMS)的出现,更是让前端开发者在 Web 开发中的作用变得更加...

    4 天前
  • 使用 Server-Sent Events 和 AngularJs 实现实时日志

    随着互联网的发展,我们的应用程序越来越依赖于日志来帮助我们理解和调试代码。在开发和测试过程中,我们需要实时监控应用程序的日志,以便我们能够快速检测和解决问题。本文将介绍如何使用 Server-Sent...

    4 天前
  • 如何引入 Material Design 引导用户让交互变得更自然?

    什么是 Material Design? Material Design 是由 Google 推出的一种视觉设计语言,旨在提供一种更具现代感和自然感的用户体验。它的设计理念是基于材料的概念,即设计元素...

    4 天前
  • 使用 Enzyme 和 Jest 进行 React 测试

    React 是一种流行的前端框架,它提供了一种组件化的方式来构建用户界面。在开发 React 应用程序时,测试是不可或缺的一部分。在本文中,我们将介绍如何使用 Enzyme 和 Jest 进行 Rea...

    4 天前
  • 解决 Express.js 中 MongoDB 连接池释放不及时的问题

    在 Express.js 中使用 MongoDB 数据库时,我们通常会使用连接池来提高性能。然而,如果连接池释放不及时,会导致连接池中的连接无法被重新利用,从而降低应用程序的性能。

    4 天前
  • 如何运用无障碍性原则让你的网站更具吸引力

    随着互联网的发展,网站已经成为人们获取信息和交流的主要渠道之一。然而,很多网站在设计和开发过程中忽视了无障碍性原则,导致一些用户无法正常访问网站,这不仅影响了用户体验,也违反了社会责任。

    4 天前
  • 如何利用 React 实现代码分割和懒加载

    React 是一款流行的前端框架,它可以帮助我们快速构建复杂的 Web 应用程序。但是,在构建大型应用程序时,我们需要考虑性能问题。其中一个性能问题是加载大量的 JavaScript 代码可能会导致页...

    4 天前

相关推荐

    暂无文章