css样式隔离-影子dom

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>
版权声明：本文为qyp_slw原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。