《现代Javascript高级教程》ShadowDOM

最新推荐文章于 2024-01-04 13:14:17 发布
最新推荐文章于 2024-01-04 13:14:17 发布
阅读量401 收藏 2
点赞数
文章标签： javascript 开发语言 ecmascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52898349/article/details/131843554
版权
点击在线阅读，体验更好链接
现代JavaScript高级小册链接
深入浅出Dart链接
现代TypeScript高级小册链接

JS Shadow DOM：创建封装的组件和样式隔离

引言

在现代的 Web 开发中，组件化和样式隔离是非常重要的概念。为了解决这些问题，Web 标准引入了 Shadow DOM 技术。Shadow DOM 允许开发者创建封装的组件，并将组件的样式和行为隔离在组件的 Shadow DOM 内部。本文将详细介绍 Shadow DOM 的属性和 API，并探讨其在实际开发中的应用场景。

1. 什么是 Shadow DOM

Shadow DOM 是一项 Web 标准，用于创建封装的组件并实现样式隔离。它允许将组件的 HTML 结构、样式和行为封装在一个独立的 DOM 树中，从而与主文档的 DOM 树相互隔离。通过这种方式，开发者可以创建具有独立样式和行为的组件，而不用担心与其他组件或主文档的样式冲突。

2. Shadow DOM API

Shadow DOM 提供了一系列用于操作和管理 Shadow DOM 的 API。

2.1 添加 Shadow Root：attachShadow(options)

attachShadow 方法用于将 Shadow DOM 附加到指定的元素上。它接收一个 options 参数，用于指定 Shadow DOM 的模式。

const hostElement = document.getElementById('host-element');
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

2.2 获取 Shadow Root：shadowRoot

shadowRoot 属性返回与元素关联的 Shadow Root。

const shadowRoot = hostElement.shadowRoot;

2.3 在 Shadow Root 中查询元素：querySelector(selector)

querySelector 方法在 Shadow Root 内部查找匹配指定选择器的第一个元素。

const element = shadowRoot.querySelector('.my-element');

2.4 在 Shadow Root 中查询元素列表：querySelectorAll(selector)

querySelectorAll 方法在 Shadow Root 内部查找匹配指定选择器的所有元素。

const elements = shadowRoot.querySelectorAll('.my-element');

2.5 获取 Shadow Root 的宿主元素：host

host 属性返回与 Shadow Root 相关联的宿主元素。

const hostElement = shadowRoot.host;

3. Shadow DOM 应用场景

Shadow DOM 在 Web 开发中有许多实际应用场景，下面是几个常见的场景：

3.1 Web 组件开发

Shadow DOM 可以帮助开发者创建封装的 Web 组件，确保组件的样式和行为不会被外部影响。以下是一个示例，演示如何使用 Shadow DOM 创建一个自定义按钮组件：

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 组件的样式 */
    .custom-button {
      background-color: #007bff;
     

 color: white;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- 宿主元素 -->
  <div id="custom-button-container"></div>

  <script>
    // 创建 Shadow Root
    const hostElement = document.getElementById('custom-button-container');
    const shadowRoot = hostElement.attachShadow({ mode: 'open' });

    // 创建自定义按钮
    const button = document.createElement('button');
    button.classList.add('custom-button');
    button.textContent = 'Click me';

    // 将按钮添加到 Shadow Root 中
    shadowRoot.appendChild(button);
  </script>
</body>
</html>

在上面的示例中，我们创建了一个 Shadow Root，并将其附加到 custom-button-container 宿主元素上。然后，我们在 Shadow Root 中创建了一个自定义按钮，并将其添加到 Shadow Root 中。

3.2 样式隔离

使用 Shadow DOM，我们可以实现样式隔离，确保组件的样式不会泄漏到外部环境。这样可以避免样式冲突，并提高组件的可维护性。

<!DOCTYPE html>
<html>
<head>
  <style>
    .custom-button {
      background-color: #007bff;
      color: white;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- 外部环境 -->
  <div>
    <button class="custom-button">Outer Button</button>
  </div>

  <!-- Shadow DOM 组件 -->
  <div id="custom-button-container"></div>

  <script>
    // 创建 Shadow Root
    const hostElement = document.getElementById('custom-button-container');
    const shadowRoot = hostElement.attachShadow({ mode: 'open' });

    // 创建自定义按钮
    const button = document.createElement('button');
    button.classList.add('custom-button');
    button.textContent = 'Shadow Button';

    // 将按钮添加到 Shadow Root 中
    shadowRoot.appendChild(button);
  </script>
</body>
</html>

在上面的示例中，我们创建了一个具有相同类名的按钮，一个在外部环境中，一个在 Shadow DOM 组件中。由于 Shadow DOM 具有样式隔离的特性，这两个按钮将拥有不同的样式，且彼此不会相互影响。

4. 自定义 Shadow DOM API

我们还可以模拟实现一些自定义的 Shadow DOM API，以增强 Shadow DOM 的功能。下面是一个示例，展示如何实现一个自定义的 insertText 方法，用于向 Shadow DOM 中的元素插入文本内容：

function insertText(element, text) {
  const textNode = document.createTextNode(text);
  element.appendChild(textNode);
}

const shadowRoot = hostElement.attachShadow({ mode: 'open' });
const div = document.createElement('div');
insertText(div, 'Hello, Shadow DOM!');
shadowRoot.appendChild(div);

在上面的示例中，我们定义了一个名为 insertText 的函数，它接收一个元素和文本内容作为参数，并创建一个文本节点，将

文本内容插入到元素中。然后，我们在 Shadow Root 中创建一个 div 元素，并使用 insertText 方法插入文本内容。

5. 参考资料

以上是关于 JS Shadow DOM 的介绍。通过使用 Shadow DOM，我们可以轻松创建封装的 Web 组件，并实现样式和行为的隔离。它在创建可重用组件、样式隔离和构建复杂 Web 应用程序时非常有用。

linwu-hi
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
你需要知道的Shadow DOM
奇舞周刊
11-29 1511
本文作者为 360 奇舞团前端开发工程师什么是 Shadow DOMShadow DOM 简介在现代的前端开发中，组件化和模块化已经成为构建可维护和可扩展 Web 程序的关键。随着 Web 程序规模的增长，很容易遇到样式和逻辑冲突的问题。为了解决这些问题，Web 标准引入了 Shadow DOM，可以帮助我们更好地隔离和封装组件。提到 Shadow DOM 就不得不提 Web Components...
JavaScript DOM编程艺术 第2版
08-01
总之，《JavaScript DOM编程艺术 第2版》是一本适合初学者和进阶者阅读的书籍，它不仅教授了JavaScript与DOM的基本操作，还涵盖了现代Web开发的诸多重要概念和技术，对于提升JavaScript编程能力和构建动态网页具有极...
关于 shadow DOM 的用法！
文摘资讯
05-26 1182
Web components 的一个重要属性是封装——可以将标记结构、样式和行为隐藏起来，并与页面上的其他代码相隔离，保证不同的部分不会混在一起，可使代码更加干净、整洁。其中，Shadow DOM 接口是关键所在，它可以将一个隐藏的、独立的 DOM 附加到一个元素上。本篇文章将会介绍 Shadow DOM 的基础使用。备注：Firefox（从版本 63 开始），Chrom...
shadow DOM
Zmikoo学习之路
06-17 314
Web components 的一个重要属性是封装——可以将标记结构、样式和行为隐藏起来，并与页面上的其他代码相隔离，保证不同的部分不会混在一起，可使代码更加干净、整洁。其中，Shadow DOM 接口是关键所在，它可以将一个隐藏的、独立的 DOM 附加到一个元素上。本篇文章将会介绍 Shadow DOM 的基础使用。 备注： Firefox（从版本 63 开始），Chrome，Opera 和 Safari 默认支持 Shadow DOM。基于 Chromium 的新 Edge 也支持 Shadow DOM
JS & CSS 关于 Shadow dom 的用法
cookcyq__的博客
05-26 1360
你是否好奇过，浏览器自带的元素的样式是如何实现的，例如videoinput，又或者在某些网站中看到一些非浏览器自带且没见过的元素？如果你打开 F12 查看定位该元素的信息，你会发现啥都没看到！其实它只是默认情况下被设置隐藏了，这里可以打开控制面板，按住 F1，将勾选即可：这便是 Shadow DOM 技术，如果你看到了一些非原生标签，它也是用到了 Shadown DOM ，下面我将简单介绍它的用法。
关于两个不常用的API createRange（处理tooltip展示）和 Shadow DOM（样式隔离）还有 Selection做复制粘贴功能的API
dongheng123的博客
12-14 157
Shadow DOM 允许将隐藏的 DOM 树附加到常规的 DOM 树中——它以 Shadow root 节点为起始根节点，在这个根节点的下方，可以是任意元素，和普通的 DOM 元素一样。1.createRange是我在表格里面看到关于tooltip 当文字长度过长就会有tip没有就不会展示 一直在想这个问题然后看了源码 发现实现就是用这个实现 先附源码。指startContainer， 自然就是指dom元素了，这里startNode。
Javascript-DOM
03-26
- **Shadow DOM**：用于封装组件的私有DOM，隔离样式和事件。 - **TreeWalker** 和 **Range**：高级遍历和选择文档内容的工具。 - **Intersection Observer**：检测元素是否进入或离开视口。 了解并熟练掌握...
[removed]javascript高级项目
04-01
15. **Web API和Web Components**：现代浏览器提供的各种API，如WebSocket、Web Storage、Fetch API等，以及自定义元素和Shadow DOM等Web Components技术，使得JavaScript可以构建更复杂、自包含的Web应用。...
JavaScript DOM编程艺术 第2版 官方源代码
05-08
同时，随着JavaScript的发展，DOM编程也不断进化，如Shadow DOM、Web Components等新兴技术，都是进阶学习的方向。通过本书的学习，你将具备使用JavaScript操控网页内容的基础，为进一步的Web开发打下坚实基础。
JavaScript DOM编程艺术（第2版）.pdf
02-12
此外，书中还会介绍异步编程，如回调函数、Promise和async/await，这些都是现代JavaScript开发中的重要概念。 除了基本操作，本书还会涉及DOM的高级主题，如CSS样式操作，动画效果的创建，以及Ajax（异步JavaScript...
web Components---shadow DOM
莫宛的博客
10-22 722
一、Shadow DOM简介（通过浏览器查看input、video的Shadow DOM） 二、Shadow DOM与DOM树 三、在Web Components中的基本用法 四、使用Web Components和shadow dom实现简单功能 Shadow DOM能够将一个隐藏的、独立的DOM附加到一个元素上。它可以保证元素功能的私有，这样就可以作为一个组件被其他页面引用，而不与外部发生冲突。
Web Components详解-Shadow DOM基础
09-04 1924
上篇文章的自定义标签中，我们使用customElements对象对原生标签进行拓展，达到组件的拓展性与复用性的效果，那么如何保证组件的属性、结构及样式的封装隔离便是本篇文章将要分享的内容，本篇文章不仅仅会介绍Shadow DOM，还会对前面说到的Custom Elements做一个使用场景的拓展及深入探究在JS作用域一文中，我们提到全局作用域和局部作用域的概念，如果全局作用域没有处理好可能会导致作用域污染，出现问题。如果单纯的使用Custom Elements实现自定义组件的功能可能会存在样式冲突，Dom干
《现代JavaScript高级教程》JS Shadow DOM：创建封装的组件和样式隔离
linwu的博客
07-09 581
Shadow DOM 是一项 Web 标准，用于创建封装的组件并实现样式隔离。它允许将组件的 HTML 结构、样式和行为封装在一个独立的 DOM 树中，从而与主文档的 DOM 树相互隔离。通过这种方式，开发者可以创建具有独立样式和行为的组件，而不用担心与其他组件或主文档的样式冲突。我们还可以模拟实现一些自定义的 Shadow DOM API，以增强 Shadow DOM 的功能。下面是一个示例，展示如何实现一个自定义的insertText');在上面的示例中，我们定义了一个名为。
shadow dom的作用和用法详解(createShadowRoot, attachShadow)
前端361
10-28 7238
相信shadow dom很多前端开发工作者都遇到过，它是web component的一部分。不过对于shadow dom很多人并不深入了解，只晓得是影子dom结构，那么到底什么是shadow dom的，本文将从概念，作用，用法三个方面来介绍下shadow dom. 介绍shadow dom之前，首先看几个常用的标签，例子1： <video controls autoplay name=...
Web Components详解-Shadow DOM插槽
09-11 1135
前言 插槽实际上也属于组件通信的一种方式，但是由于其强大的api和实用性，我将其单独拆开来介绍。 定义 Slot（插槽）是Web Components中一个重要的特性，它允许在组件内部定义占位符，以便父组件可以向其中插入内容。换句话说就是将子组件或者标签传入父组件中，最终达到在父组件外部实现子组件的效果
初识 shadowDOM （学习笔记）
weixin_33772645的博客
01-04 220
当下的前端界，各种MV*框架大行其道，而在这之前则是jQuery一家独大。jQuery是操作dom的利器，并且将dom封装成了JQ对象从而增加了一些新的api及特性。而MV*们则更加的“粗暴”，直接屏蔽了底层的dom操作，直接通过框架将数据映射到模板上。不仅如此，MV*们更是为中大型项目的组织构建提供了良好的基础——模块抽离和代码复用。无论是vue等还是各家的小程序，都提供了template 和 ...
Lit（四）：生命周期、使用 Shadow DOM
weixin_41897680的博客
08-28 914
Lit（四）：生命周期、使用 Shadow DOM
shadow dom简介
方方洛的博客
09-05 455
shadow dom简介，light dom，html，slot，web component，:host，:slotted，selector
Webkit底层原理(4)--DOM事件机制和Shadow DOM
从入门到进错门
10-05 565
一、DOM事件机制 1. 事件的工作过程 事件在工作过程中使用两个主体，第一个是事件（event），第二个是事件目标（EventTarget）。每个事件都有属性来标记该事件的事件目标。当事件到达事件目标的时候，在这个目标上注册的监听者（EventListeners）都会被触发调用，当然这些监听者的调用顺序是不固定的，所以不能依赖监听者注册的顺序来决定你的代码逻辑。 事件处理最重要的部分就是事件捕获...
attachShadow样式隔离和JavaScript 沙箱
最新发布
我的博客简介
01-04 1545
Shadow DOM 技术是 Web 标准中一种用于创建封装的、独立的 DOM 子树的技术。它的设计目的是为了将组件的样式、结构和行为封装起来，从而避免全局 CSS 样式或 JavaScript 代码的影响，特别适用于组件化开发和构建复杂的 Web 应用程序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

linwu-hi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值