使用 shadow DOM

2023-04-17 02:42| 来源: 网络整理| 查看: 265

本文章假设你对 DOM（文档对象模型）有一定的了解，它是由不同的元素节点、文本节点连接而成的一个树状结构，应用于标记文档中（例如 Web 文档中常见的 HTML 文档）。请看如下示例，一段 HTML 代码：

DOCTYPE html> Simple DOM example Here we will add a link to the Mozilla homepage

这个片段会生成如下的 DOM 结构：

Shadow DOM 允许将隐藏的 DOM 树附加到常规的 DOM 树中——它以 shadow root 节点为起始根节点，在这个根节点的下方，可以是任意元素，和普通的 DOM 元素一样。

这里，有一些 Shadow DOM 特有的术语需要我们了解：

Shadow host：一个常规 DOM 节点，Shadow DOM 会被附加到这个节点上。 Shadow tree：Shadow DOM 内部的 DOM 树。 Shadow boundary：Shadow DOM 结束的地方，也是常规 DOM 开始的地方。 Shadow root: Shadow tree 的根节点。

你可以使用同样的方式来操作 Shadow DOM，就和操作常规 DOM 一样——例如添加子节点、设置属性，以及为节点添加自己的样式（例如通过 element.style 属性），或者为整个 Shadow DOM 添加样式（例如在元素内添加样式）。不同的是，Shadow DOM 内部的元素始终不会影响到它外部的元素（除了 :focus-within），这为封装提供了便利。

注意，不管从哪个方面来看，Shadow DOM 都不是一个新事物——在过去的很长一段时间里，浏览器用它来封装一些元素的内部结构。以一个有着默认播放控制按钮的元素为例。你所能看到的只是一个标签，实际上，在它的 Shadow DOM 中，包含了一系列的按钮和其他控制器。Shadow DOM 标准允许你为你自己的元素（custom element）维护一组 Shadow DOM。

【本文地址】

公司简介

联系我们