css 隔离方案之 Shadow Dom简单基本使用（真正上的css隔离）

最新推荐文章于 2024-09-04 23:06:58 发布

拼客骏

最新推荐文章于 2024-09-04 23:06:58 发布

阅读量730

点赞数 1

文章标签： css css3 javascript

本文链接：https://blog.csdn.net/weixin_48914823/article/details/122218243

版权

这里只展示 Shadow Dom 的简单使用，具体看注释就可以了，具体的使用场景，以及上面的方法还需要大家自己手动才会深刻。

<!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>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    #box {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 60px auto;
      width: 200px;
      height: 200px;
      border-radius: 10%;
      background-color: cyan;
    }

    #box span {
      font-size: 16px;
      color: #333;
    }
  </style>
</head>

<body>
  <!-- 创建盒子 -->
  <div id="box">
    <span>承载着shadom的盒子</span>
  </div>
</body>

<script>
  let showDow = box.attachShadow({ mode: 'open' })
  // 创建style
  let styleAttr = document.createElement('style')
  styleAttr.textContent = ` 
  p {color : #fff; font-size : 20px} 
  `
  // 创建p标签
  let pDom = document.createElement('p')
  // 赋值文本
  pDom.innerHTML = '我是影子节点'
  // 插入节点
  showDow.appendChild(styleAttr)
  showDow.appendChild(pDom)
  // 查看该节点的影子节点 返回一个对象
  for (let i in box.shadowRoot) { console.log(i, "---------------", box.shadowRoot[i]); }  //打印出所有的属性以及值
</script>

</html>