https://developer.mozilla.org/zh-CN/docs/Web/API/Element/attachShadow
    image.png

    1. <body>
    2.   <p>全局的P标签</p>
    3.   <div id="box"></div>
    5.   <script>
    6.     // closed外界无法访问 shadowDOM
    7.     const $el = document
    8.     .getElementById('box')
    9.     .attachShadow({ mode: 'closed' })
    11.     const elem = document.createElement('p')
    12.     elem.innerHTML = 'shadowDOM is children element'
    14.     const elemStyle = document.createElement('style')
    15.     elemStyle.textContent = `p {color: red;font-size: 32px}`
    17.     // shadowDOM 里面添加 style 标签和 p标签
    18.     $el.appendChild(elemStyle)
    19.     $el.appendChild(elem)
    20.   </script>
    21. </body>