如何使用 Custom Elements 打造自定义模态框组件

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

前言

在 Web 开发中，弹窗（Modal）是极其普遍的一个组件。而 Custom Elements，即自定义元素，是 Web Component 标准中的一部分。使用 Custom Elements 可以轻松地创建自定义的 HTML 元素，这也让我们可以通过自定义元素的方式，创建自己的 Modal 组件。

本文将教你如何使用 Custom Elements 以及其他相关技术，打造出一个自定义 Modal 组件，样式和功能都会相对简单，但足以说明 Custom Elements 的使用方法。

Custom Elements

Custom Elements 允许自定义 HTML 元素，形式为自定义标签名字，例如 <my-modal> 或 <my-custom-element>。

要创建一个自定义元素，可以使用 customElements.define() 方法。该方法接受两个参数：元素名称和元素类。

首先，我们需要定义一个类来描述该元素，然后在自定义元素中使用 customElements.define() 方法将该类与名称关联。

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

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

在 MyModal 类中，我们定义了 Modal 组件的内部结构，并添加了绑定事件和显示/隐藏方法。

在 customElements.define() 方法中，我们将 'my-modal' 名称与 MyModal 类关联起来。

使用 customElements.define() 后，我们就可以在 HTML 中使用 <my-modal></my-modal> 标签来创建 Modal 组件了。

Shadow DOM

当我们使用自定义元素时，组件内部结构（即 MyModal 类中的结构）会被插入到文档流中。这可能会导致样式冲突等问题。

为了避免这些问题，我们可以使用 Shadow DOM。Shadow DOM 是一种可隔离的 DOM 子树，在组件内部使用它可以确保组件中的样式和 DOM 结构不会受到外部的干扰。

在自定义元素中，我们可以通过 this.attachShadow({ mode: 'open' }) 方法来创建 Shadow DOM，然后使用 this.shadowRoot 来访问 Shadow DOM 的根节点。

改造 MyModal 类，添加 Shadow DOM：

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

在上述代码中，我们先使用 this.attachShadow({ mode: 'open' }) 方法创建 Shadow DOM，然后在 shadow.innerHTML 中定义组件结构和样式。

将组件添加到页面中

在页面中使用 <my-modal> 标签创建组件时，该标签是空的，不会显示任何内容。我们可以通过在组件中添加 slot 元素，使组件可以接受页面传递进来的内容。

接下来，在 HTML 文件中创建一个 <my-modal> 结构，并使用 slot 传递内容：

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

完整的示例代码如下：

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

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

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

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

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

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

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

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

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

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

总结

Custom Elements 是 Web Component 标准中的一部分，它允许创建自定义的 HTML 元素，配合 Shadow DOM 可以用于创建高复用性的自定义组件。在本文中，我们使用 Custom Elements 和 Shadow DOM 打造了一个简单的自定义 Modal 组件，并展示了其中的代码实现。

除此之外，我们还可以在组件中添加诸如自定义属性、生命周期钩子函数等更加复杂的功能，将其应用到实际的项目中，可以极大提升开发效率与代码的可维护性。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6459bd11968c7c53b0bd949f

阅读全文

猜你喜欢

  • Web Components 中的状态管理

    随着 Web 技术的不断发展，前端开发也变得越来越复杂。在构建复杂前端应用时，往往需要有效的状态管理来保证应用的可维护性和灵活性。Web Components 是一项强大的技术，它可以让我们将应用组件...

    1 年前
  • ES12 中的 Promise.any() 在文件上传中的使用场景

    前言 ES12 中新增了一个全新的方法 Promise.any()，它可以接受一个 Promise 对象数组，并在其中至少有一个 Promise 对象状态变成“已解决”时返回一个新的 Promise ...

    1 年前
  • Bootstrap 响应式设计的优化技巧

    响应式设计是现代网页设计的一项重要技术，它可以使得网页能够自适应不同设备的屏幕大小，以提供更好的用户体验。Bootstrap 是一个流行的前端框架，提供了丰富的响应式设计组件和工具，可以帮助开发者快速...

    1 年前
  • CSS Reset 的优缺点与比较

    在进行前端开发时，我们会发现不同的浏览器有不同的默认样式，为了解决这个问题，我们可以使用 CSS Reset 进行初始化样式。本文将主要介绍 CSS Reset 的优缺点并进行比较，同时还将提供一些示...

    1 年前
  • Redis 跨平台部署时需要注意的问题

    简介 Redis 是一个开源的高性能的 key-value 存储系统。Redis 可以作为缓存、消息队列、分布式锁等场景下使用。Redis 有多平台的支持，包括 Windows、Mac 和 Linux...

    1 年前
  • 解构赋值 —— 学习 ES6 的最热门功能之一

    在 JavaScript 的早期版本中，要从一个对象或数组中获取元素，常常需要通过循环、for-in 循环或对象中的属性来一个个获取。而在 ES6 中，引入了解构赋值这一特性，可以轻松地从对象或数组解...

    1 年前
  • 多说一句：Promise 多种应用方法分析

    Promise 是前端开发中异步编程的重要组成部分。它曾经是 ES6 标准中的新特性，现在已经成为了现代浏览器的标准特性之一。 Promise 是一种处理异步操作的方法，用来解决回调地狱的问题。

    1 年前
  • Socket.io 如何实现多终端数据同步

    随着移动互联网和Web应用的发展，前端开发中越来越需要处理实时数据同步的问题。即使在同一应用程序中，多个终端交互和修改数据，也需要实时传递这些修改并同步到其他终端上。

    1 年前
  • 使用 Server-sent Events 在生产监控中实现实时告警

    随着现代化生产环境的发展，监控已经成为一个不可或缺的部分。在生产监控中，实时告警是至关重要的。这篇文章将介绍如何使用 Server-sent Events 技术，在前端实现实时告警。

    1 年前
  • Serverless 框架中如何使用 SecretManager

    在云计算时代，使用 Serverless 框架已经成为了“云原生”开发的一个重要趋势。而 Serverless 框架在部署、扩展、安全等方面有着很多优势。其中，使用 SecretManager 管理应...

    1 年前
  • JavaScript 中的模块化（ES6 模块详解）

    在 JavaScript 活跃的开发领域，模块化已经变得日益重要。要想真正做好前端开发，你必须掌握 JavaScript 的模块化编程。而在 ES6 中，JavaScript 才真正引进了原生的模块化...

    1 年前
  • 如何使用 Webpack 的 Code Splitting 优化页面性能

    在前端开发中，我们经常会遇到需要加载大量 JavaScript 文件的情况，这会导致页面加载速度变慢，用户体验不佳。为了解决这个问题，我们可以使用 Webpack 的 Code Splitting 技...

    1 年前
  • Vue.js 中如何使用 v-on 绑定事件？

    前言 Vue.js 是一款非常流行的前端开发框架，它提供了一些非常方便的指令和组件，其中就包括 v-on 指令，这个指令用于绑定事件。 v-on 指令可以将某个事件与一个方法关联起来，当该事件触发时，...

    1 年前
  • RxJS 中的 share 操作符使用详解

    RxJS 中的 share 操作符使用详解 RxJS（Reactive Extensions for JavaScript）是一个流行的 JavaScript 库，它支持响应式编程。

    1 年前
  • 如何在 SASS 中使用多个选择器进行样式定义？

    在前端开发中，我们经常需要管理许多不同的样式。这些样式可能在多个页面中被使用，且需要在不同的设备上显示不同的样式。为了更好地管理我们的样式，我们可以使用 CSS 预处理器。

    1 年前
  • 从零使用 Enzyme 和 Jest 测试 React 应用

    简介 在前端开发中，我们经常需要测试我们的代码以确保它们可以正确运行并且不会引入新的错误。Enzyme 和 Jest 是两个常用的测试工具，分别用于测试 React 组件和 JavaScript 代码...

    1 年前
  • 使用 Chai 和 Mocha 进行惯例驱动的开发（TDD）

    前端开发需要大量的测试来保证代码质量，但是手工一遍遍测试是十分繁琐的。而惯例驱动的开发（TDD）则是前端开发中的好习惯。TDD 是指在开发代码之前先写测试用例，然后根据测试用例逐步实现代码，最后再运行...

    1 年前
  • Mongoose 中的聚合查询详解

    Mongoose 是 Node.js 中最常用的 MongoDB ODM（Object Document Mapper），提供了一种面向对象的方式来操作 MongoDB 数据库，并且具有丰富的功能。

    1 年前
  • 利用 Custom Elements 构建自定义视频播放器组件

    随着互联网技术的发展，视频已经成为了人们获取信息和娱乐的重要形式之一。而对于前端开发者来说，构建一个富有交互性、自定义程度高的视频播放器组件是一项具有挑战性和意义的任务。

    1 年前
  • Redux 中间件在 React 应用中的应用

    前言 Redux 是一个流行的 JavaScript 状态管理库。它以可预测的方式管理应用程序的状态，使开发人员能够轻松跟踪和调试它们的应用程序状态。和其他状态管理库一样，Redux 通过 dispa...

    1 年前

相关推荐

    暂无文章