css样式隔离

使用 浏览器的api实现，有个缺点 如果挂载到body上就会产生一些影响

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  10. <body>
  11.   <div>
  12.     <p>孤独的p</p>
  13.     <div id="shadow"></div>
  14.   </div>
  15.   <p>审查元素的时候就会看到 shadowDOM是 名为shadow的影子，外界是无法访问的的</p>
  16. </body>
  18. </html>
  19. <script>
  20.   /**
  21.    *  css 样式隔离
  22.   */
  23.   //  open 外界可以访问 closed 外界不能访问
  24.   let shadowDOM = document.getElementById('shadow').attachShadow({ mode: 'closed' });
  25.   //  外界无法访问的shadow dom
  26.   let pEl = document.createElement('p');
  27.   pEl.innerHTML = "shadowDOM";
  28.   let styleEl = document.createElement('style');
  30.   styleEl.textContent = `
  31.     p{color:red}
  32.   `
  33.   shadowDOM.appendChild(styleEl);
  34.   shadowDOM.appendChild(pEl);
  36.   //  纯在一个问题 ，如果把这些放到body上后 就会有影响
  37.   // document.body.appendChild(pEl)
  38. </script>