使用 Custom Elements 实现步骤条组件及遇到的坑点

Custom Elements 是一项 Web Component 技术，可以让开发者自定义 HTML 元素并在页面中使用。

在本文中，我们将介绍如何使用 Custom Elements 实现一个步骤条组件，并讨论一些遇到的坑点。

实现步骤

1. 定义组件

我们首先定义一个 step-bar 组件，其中包含若干个 step-item。每个 step-item 表示一个步骤，包含一个标题和一个状态，状态可以是 active、done 或 undone 之一。

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

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

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

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

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

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

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

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

2. 编写样式

为了美化步骤条组件，我们需要编写一些样式。这里我们采用了 Flex 布局和 CSS 伪元素等技巧。

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

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

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

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

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

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

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

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

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

3. 初始化组件

我们需要在 connectedCallback 方法中初始化组件。对于 step-bar 组件，我们需要遍历所有子元素并添加 step-item 类名，以便它们受到样式控制。

对于 step-item 组件，我们需要根据属性值设置状态和标题。

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

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

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

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

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

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

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

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

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

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

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

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

4. 使用组件

现在我们可以在 HTML 中使用 step-bar 和 step-item 元素了。

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

遇到的坑点

在实现步骤条组件时，我们遇到了一些坑点。下面是一些解决方案及注意事项。

1. HTML 内容被移除

在使用组件时，注意不要通过 JS 动态修改组件内部的 HTML 内容，因为这会使浏览器将原来的 HTML 移除并重新插入新的 HTML，导致组件失效。

2. 动态属性修改不会自动触发 attributeChangedCallback

在组件中，我们可以通过 setAttribute 或 property 来修改自定义属性的值。但是需要注意的是，当我们通过 property 修改属性值时，不会自动触发 attributeChangedCallback 方法，我们需要额外调用 setAttribute 来触发。

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

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

3. 内部元素绑定事件无法传递到外部

当我们将一个 click 事件绑定到组件的内部元素时，点击该元素时，该事件不会传递到组件本身或其父级元素，导致无法触发组件的相关回调。解决方法是使用事件委托，将事件绑定到组件本身或其父级元素。

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

总结

在本文中，我们使用 Custom Elements 实现了一个步骤条组件，并讨论了一些遇到的坑点。本文的内容可以帮助读者了解 Custom Elements 技术，并指导读者如何开发自定义组件。完整的示例代码可以在我的 GitHub 仓库中找到。

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

阅读全文

猜你喜欢

  • Serverless 架构下 Node.js 开发实践

    什么是 Serverless 架构？ Serverless 架构是一种基于事件驱动的无服务器计算架构，可以使开发者无需关心基础设施的管理，只需要编写代码并将其部署至云端即可。

    1 年前
  • 如何在 Jest 测试框架中测试被 HOC 包装的组件

    简介 Jest是一个功能齐全的JavaScript测试框架，它简单易用且效率高。它支持在Node.js和浏览器环境中运行测试，并且附带了一个全面的断言库和mocking函数库。

    1 年前
  • TypeScript 中的 T 类型？

    TypeScript 是一种由微软开发的开源编程语言，它是 JavaScript 的一个严格超集，可以编译成纯 JavaScript 代码。TypeScript 提供了类型注解和编译时类型检查等功能，...

    1 年前
  • Docker 容器中开放端口无法访问的解决方法

    背景 Docker 是一种流行的容器化技术，用于构建、部署和运行应用程序。在 Docker 中，容器是一个独立的运行环境，它可以在任何地方运行，无需考虑底层操作系统和硬件的细节。

    1 年前
  • ES7 async/await 理解与入门

    ES7中的async/await是一种异步编程解决方案，可以帮助开发者更加优雅地处理异步操作。本文将详细介绍async/await的原理、使用方法以及示例代码，帮助读者理解并入门这一重要的前端技术。

    1 年前
  • 使用 Express.js 构建高性能的 Web 爬虫的技巧和经验

    Web 爬虫是一种自动化抓取 Web 页面信息的程序，其应用范围涉及各个领域，例如搜索引擎、数据挖掘、舆情监测等。在前端领域，我们通常需要使用 Web 爬虫来获取网站数据，帮助我们进行数据分析、SEO...

    1 年前
  • RTK Query：一个新的免费工具，可解决您在 GraphQL 工作流程中遇到的常见问题

    前言 在前端开发中，GraphQL 的应用越来越广泛，GraphQL 能够帮助开发者更加高效地获取和管理数据。但是，使用 GraphQL 也会遇到一些困难和问题，特别是在处理缓存和网络请求等方面。

    1 年前
  • 如何在 Material Design 中实现类似于 iOS 的图标震动效果

    Material Design 是谷歌在设计语言方面提出的一套概念，它以具有意义的动画和流畅、有意义的转场为特色。相对于 iOS 的设计语言，Material Design 声明了更多的自由度，更多的...

    1 年前
  • ECMAScript 2018 (ES9) 的新特性之字符串 trimLeft 和 trimRight 方法

    简介 ECMAScript 2018 (ES9) 是一种用于编写 Web 应用程序的脚本语言的标准。它引入了许多新特性和改进，其中之一是字符串的 trimLeft 和 trimRight 方法。

    1 年前
  • Sequelize ORM 开发指南：如何使用 Model 进行数据建模？

    前言 在 web 应用开发中，数据库是必不可少的一部分。而 Sequelize ORM 是一个流行的 Node.js ORM 框架，它提供了便捷的 API 来管理数据库。

    1 年前
  • 如何在 Fastify 中处理大批量请求的性能问题

    在现代的 Web 开发中，处理大批量请求的问题是一个很常见的问题。在处理上千个并发请求时，服务端可能会出现性能瓶颈，从而影响整个系统的性能。Fastify 是一个高性能的 Web 框架，它提供了一些可...

    1 年前
  • Node.js 的性能优化之 Event Loop

    什么是 Node.js 的 Event Loop？ Node.js 应用程序通常是事件驱动的，这意味着应用程序通过处理事件来响应请求，而不是阻塞线程等待请求。事件驱动模型的核心是 Event Loop...

    1 年前
  • ECMAScript 2020: Set 和 Map 集合的所有操作详解

    在 ECMAScript 2020 中，Set 和 Map 是两个新的内置对象，用于管理数据集合。 Set 集合 Set 集合是一组唯一值的集合，允许添加、删除、查找和迭代元素。

    1 年前
  • 使用 Tailwind 在 Vue.js 中快速开发出漂亮的表格

    Tailwind 是一种基于原子类的 CSS 框架，它使得开发者可以快速构建出美观的 UI 界面。Vue.js 是一种流行的 JavaScript 框架，它提供了一种易于使用、高效的方式来构建动态 U...

    1 年前
  • 进行 JavaScript 异步测试的最佳实践 - 使用 Mocha

    在前端开发中，JavaScript 异步测试是常见的一种测试方式。然而，由于 JavaScript 的异步特性，异步测试的实现相对复杂，需要特殊的技术手段来进行测试。

    1 年前
  • CSS Grid 布局实现不等高的瀑布流布局

    前端开发中，经常需要实现页面上的瀑布流布局，这种布局风格看起来很炫酷。而在实现瀑布流布局的过程中，往往会遇到一些图片高度不同的情况。一般的布局方式会导致空白区域出现，影响视觉效果和用户体验。

    1 年前
  • 使用 Next.js 时如何处理前后端跨域的问题？

    随着前端开发的发展，前端由一开始的简单页面转变为单页应用，再到现在的 SSR（服务端渲染）与 CSR（客户端渲染）相结合。在这个过程中，前后端分离的思路也越来越普及，因此前后端跨域问题也越来越突出。

    1 年前
  • RxJS 中遇到 “数据流丢失” 问题的解决方法

    在使用 RxJS 进行前端开发时，有时会遇到 “数据流丢失” 的问题。这通常出现在处理异步数据流时，例如从后端 API 获取数据后在前端进行处理和展示等过程中。本文将介绍这个问题的原因，以及如何使用 ...

    1 年前
  • Flexbox 布局的「大家族」：flex-grow、 flex-shrink 和 flex-basis

    Flexbox 是一种强大的布局方式，它可以让我们轻松地在页面上实现各种布局效果。在 Flexbox 中，经常用到的三个属性分别是 flex-grow、 flex-shrink 和 flex-basi...

    1 年前
  • 利用 Mongoose 实现 MongoDB 数据迁移：备份和还原

    简介 MongoDB 是一个非常流行的文档数据库，而 Mongoose 是 Node.js 中操作 MongoDB 的常用库。在开发过程中，我们经常需要进行数据迁移的操作，如备份和还原数据。

    1 年前

相关推荐

    暂无文章