Web Components 中 Shadow DOM 中包含 Web Components 如何样式复用

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

前言

Web Components 是一种用于创建可重用组件的技术，它由 Custom Elements、Shadow DOM 和 HTML Templates 三个技术组成。其中，Shadow DOM 用于将组件的样式和 HTML 结构封装在一起，防止组件的样式和 HTML 结构对外泄露，从而保证组件的可重用性和可维护性。

但是，在一个 Shadow DOM 中包含另一个 Web Components 时，如何实现样式的复用呢？本文将详细介绍这个问题，并给出示例代码。

Shadow DOM 中的样式

在 Shadow DOM 中，样式有两种类型：Scoped Styles 和 Inherited Styles。

Scoped Styles

Scoped Styles 是指在 Shadow DOM 中定义的样式，它只会影响 Shadow DOM 内部的元素，不会影响 Shadow DOM 外部的元素。例如：

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

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

在上面的代码中，我们定义了一个 Shadow DOM，其中包含一个 h1 标签和一个 Scoped Styles，它会将 h1 的字体颜色设置为红色。此时，如果在 Shadow DOM 外部使用 my-component 组件，不会受到 Scoped Styles 的影响，因为 Scoped Styles 只会影响 Shadow DOM 内部的元素。

Inherited Styles

Inherited Styles 是指在 Shadow DOM 外部定义的样式，它会被 Shadow DOM 内部的元素继承。例如：

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

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

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

在上面的代码中，我们定义了一个在 Shadow DOM 外部的样式，它会将 my-component 的字体大小设置为 20px。此时，如果在 Shadow DOM 内部使用 h1 标签，它会继承外部样式的字体大小，即 h1 的字体大小也会是 20px。

Shadow DOM 中包含 Web Components

当一个 Shadow DOM 中包含另一个 Web Components 时，我们需要注意以下几点：

  1. 外部 Web Components 的样式需要使用 Inherited Styles 定义，以便内部 Web Components 可以继承它们的样式。
  2. 内部 Web Components 的样式需要使用 Scoped Styles 定义，以便它们的样式不会影响外部 Web Components。

例如：

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

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

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

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

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

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

在上面的代码中，我们定义了两个 Web Components：my-button 和 my-dialog。my-dialog 中包含了 my-button，它们的样式分别使用 Scoped Styles 和 Inherited Styles 定义，以便它们的样式不会互相影响。

总结

在 Web Components 中使用 Shadow DOM 可以有效地封装组件的样式和 HTML 结构，从而保证组件的可重用性和可维护性。当一个 Shadow DOM 中包含另一个 Web Components 时，我们需要注意样式的定义方式，以便实现样式的复用。

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

阅读全文

猜你喜欢

  • 使用 ESLint + Prettier + husky 打造完美的代码规范

    作为一名前端开发人员，代码规范是非常重要的。一个良好的代码规范可以提高代码的可读性、可维护性和可复用性。本文将介绍如何使用 ESLint、Prettier和husky在前端项目中打造完美的代码规范，帮...

    1 年前
  • 在 LoopBack 应用中使用 Chai 进行 RESTful API 测试的最佳实践

    前言 LoopBack 是当前比较流行的 Node.js 后端框架，它基于 Express 库进行封装，在保证高效和易用性的同时，拥有强大的 ORM 和数据验证功能。

    1 年前
  • 如何用 Serverless 框架实现全自动化 CI/CD 流程

    前言 现在的互联网发展已经不再是简单的展示，更多的是互动和交互，这也让前端技术越来越重要。前端技术虽然看上去不如后端复杂，但是前端相关工具和流程的工作同样不可或缺。

    1 年前
  • React16.8 引入的 Hooks 详解，让你更好地组织复杂组件

    随着 React 生态的不断发展，React 16.8 版本引入了一种全新的特性 —— Hooks。它可以让我们在不使用 class 组件的情况下，更好地组织复杂组件，并且在组件间共享状态和逻辑变得更...

    1 年前
  • Docker Compose 介绍

    前言 在前端开发过程中，我们不仅需要处理页面的展示逻辑，还需要关注整个项目的部署和开发环境的搭建。Docker Compose 是一个流行的容器编排工具，可以帮助我们快速构建、部署和管理多个容器应用。

    1 年前
  • Jest 的原理及其对 React 组件测试的应用

    前言 在现代 Web 开发中，不同的前端框架引用了不同的测试工具。Jest 是一个集成测试框架，允许您编写测试，运行测试和生成代码覆盖率报告。另外，Jest 还能直接测试 React 组件，方便、快捷...

    1 年前
  • Socket.io 报错解决方法汇总

    在 Web 开发中，Socket.io 是一个非常流行的用于实现双向通信的库。然而，当我们使用它时，可能会遇到一些报错。本文将介绍一些常见的 Socket.io 报错以及解决方法，希望可以帮助大家在开...

    1 年前
  • Kubernetes 中的应用程序性能优化

    前言 Kubernetes（以下简称 k8s）是一种流行的容器编排平台，它具有诸多优点：自动伸缩、容器自愈、服务发现等等。不过在实践中，我们可能会遇到一些性能问题。

    1 年前
  • 如何在 ES7 中使用 Object.entries 方法获取对象中的所有属性和值

    如何在 ES7 中使用 Object.entries 方法获取对象中的所有属性和值 在 JavaScript 这门语言中，对象是表示复杂数据类型的一种数据结构，它由一组属性和值构成。

    1 年前
  • 在 GraphQL 中处理写操作的实现

    GraphQL 是一个用于构建 API 的查询语言和运行时。它的主要特点是能够让客户端只请求所需要的数据，而不是像 REST API 一样返回整个资源。除此之外，GraphQL 还提供了灵活的写操作来...

    1 年前
  • 常见 Fastify 中间件的使用场景及最佳实践

    Fastify 是一个高度效率和低开销的 Web 框架，广受前端工程师和后端开发者欢迎。它的使用场景包括了 Web API、微服务和基于 HTTP 协议的应用等。 在 Fastify 中，中间件是关键...

    1 年前
  • Mongoose 对 Nested Schema 的优化

    在使用 Mongoose 进行后端开发时，经常会使用 Nested Schema 来存储一些复杂的数据结构。但是，如果 Nested Schema 的层级较深，使用起来可能会导致性能上的问题。

    1 年前
  • 用 ES12 协议构建更安全的 JS 应用

    前言 近年来，随着 JavaScript 应用的快速发展，前端开发人员面临着越来越多的安全威胁。在这个时代，数据是最重要的资产之一，因此保护数据的安全对于每个公司和个人来说都是至关重要的。

    1 年前
  • 利用 Redux DevTools 调试 Redux 应用

    在前端开发中，Redux 是一个非常流行的状态管理工具，但是当我们在开发中遇到问题时，如何去调试 Redux 应用呢? 这时我们可以利用 Redux DevTools 工具来方便地调试。

    1 年前
  • RxJS 中使用 skip() 函数对流进行跳过

    RxJS 是一个非常强大的前端编程库，它可以让我们更加便捷地处理复杂的异步数据流。在 RxJS 中，我们可以使用 skip() 函数对流进行跳过。 什么是 skip() 函数 在 RxJS 中，ski...

    1 年前
  • 如何使用 Node.js 调用第三方 API 并获得 JSON 数据？

    在前端开发中，我们经常需要调用第三方 API 来获取数据，而 Node.js 是一种非常流行的 JavaScript 运行环境，使得我们能够在服务器端运行 JavaScript 代码。

    1 年前
  • 秒杀 CSS 技巧：如何在 LESS 中生成颜色渐变？

    秒杀 CSS 技巧：如何在 LESS 中生成颜色渐变？ 颜色渐变是 Web 前端开发中常见而且重要的技巧，特别是在设计界面风格时，颜色渐变的运用能够大大提升网站的美感和用户体验。

    1 年前
  • RESTful API 中 REST 软件架构的理解和应用

    什么是 REST REST（Representational State Transfer）是指一组架构约束条件和原则，这些约束条件和原则用于在网络环境下设计和开发 Web 服务。

    1 年前
  • Web Components 中如何实现依赖注入

    Web Components 是一种现代化的 Web 开发技术，它可以让我们定义自己的标签，从而使我们能够创建可复用、可组合的 Web 组件。在 Web 组件中实现依赖注入是使组件变得更加可复用和可测...

    1 年前
  • Babel-preset-react-hmre 优化 React 代码的热替换

    概述 随着 React 技术的发展，更多前端开发者开始接触 React 框架。在日常的开发中，我们经常需要使用到热替换功能，以保证我们在进行代码修改时可以快速地在浏览器中看到修改的效果。

    1 年前

相关推荐

    暂无文章