css隔离shadow

最新推荐文章于 2024-08-03 14:19:07 发布

dream_wuzhen

最新推荐文章于 2024-08-03 14:19:07 发布

阅读量450

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/dream_enterprising/article/details/117483331

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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)