shadow dom类似于audio标签的一些属性，是我们外部无法更改的，做到了样式隔离
    特点：

    • 样式隔离：内部样式更改，不会影响外部样式
    • 访问性：如果mode=open，可以通过shadow.shadowRoot进行方法，如果mode=closed，则无法访问
      1. // html
      2. <div>
      3. <p>hello world</p>
      4. <div id="shadow"></div>
      5. </div>
      1. // js
      2. <script>
      3. let shadowDom = shadow.attachShadow({mode: 'closed'});
      4. let pDom = document.createElement('p');
      5. let styleEle = document.createElement('style');
      6.     styleEle.textContent = `
      7.       p{color: green;}
      8.     `
      9. pDom.innerHTML = 'hahaha';
      10. shadowDom.appendChild(pDom);
      11. shadowDom.appendChild(styleEle);
      12. console.log(shadow.shadowRoot) // null
      13. </script>