css样式隔离-影子dom

lar_slw

已于 2022-04-01 21:13:06 修改

阅读量883

点赞数

分类专栏： html 文章标签： CSS样式隔离 Shadow DOM HTML JavaScript DOM

于 2022-04-01 21:12:18 首次发布

本文链接：https://blog.csdn.net/qyp_slw/article/details/123907917

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.可以做到css样式隔离，独立起来

<!--
 * @Author: your name
 * @Date: 2022-04-01 20:49:50
 * @LastEditTime: 2022-04-01 21:02:58
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /qiankun-parent/shadow.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p>slw</p>
    <div id="shadow">
      <p>p2</p>
      <p>slw</p>
    </div>
    <script>
      let dom = document.createElement("style");

      dom.textContent = `
        p{color: red}
      `;
      document.head.appendChild(dom);
    </script>
    <script>
      let p1 = document.createElement("p");
      p1.innerHTML = "p1";
      document.body.appendChild(p1);
    </script>
    <script>
      let s = shadow.attachShadow({ mode: "closed" }); // closed  open

      let p3 = document.createElement("p");
      p3.innerHTML = "p3";
      s.appendChild(p3);
      document.body.appendChild(p3);
    </script>
  </body>
</html>