css隔离shadow

h5 里面有很多标签都用到了，比如，音频，视频
方式 样式 污染，并且不会被修改

  <!-- css 隔离互不影响 -->
  <p>这个是body 的p 标签</p>
  <div id="shadow"></div>

    // 创建一个 影子节点
    const shadowDom = document.getElementById("shadow").attachShadow({mode: "closed"})
    // 创建影子里面的内容
    let pele = document.createElement("p")
    pele.innerHTML = "这个是影子里面的p"
    // 增加影子里面独有的 style
    let eleStyle = document.createElement("style")
    eleStyle.textContent = `
     p {color: red}
    `
    // 创建的属性，加载影子身上
    shadowDom.appendChild(pele)
    shadowDom.appendChild(eleStyle)