shadowDom

莫道开发

已于 2023-08-08 16:37:48 修改

阅读量345

点赞数

分类专栏： micro-app 前端文章标签：前端

于 2022-11-14 11:24:52 首次发布

本文链接：https://blog.csdn.net/weixin_43856422/article/details/127844209

版权

前端同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

micro-app

8 篇文章 1 订阅

订阅专栏

1. 基本理解

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l7dqKIJt-1666318864959)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/670e8d6fa01446db8e2b4f66856b402e~tplv-k3u1fbpfcp-watermark.image?)]

这里，有一些 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 添加样式（例如在 <style> 元素内添加样式）。不同的是，Shadow DOM 内部的元素始终不会影响到它外部的元素（除了 :focus-within），这为封装提供了便利。

2. 进行css隔离的原因

Shadow DOM 内部的样式不会影响外部，
外部的样式不会影响shadow Dom的元素的样式，
例如下面案例中同样class 的标签，不会相互影响样式

3. 基本使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .haha {
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="inner"></div>
    <div class="haha">哈哈哈哈</div>
  </div>
</body>
<script>
  const inner = document.querySelector('.inner');
  const innerShadow = inner.attachShadow({mode: 'open'});

  const div = document.createElement('div');
  div.innerHTML = "haha";
  div.className = 'haha'

  const style = document.createElement('style');
  style.textContent = `
    .haha {
      color: #ff0000;
    }
  `;
  
  innerShadow.appendChild(style)
  innerShadow.appendChild(div)
</script>
</html>