css隔离方案:shadow-dom

weixin_45439379

已于 2022-03-25 09:35:26 修改

阅读量834

点赞数

分类专栏： js 文章标签：微前端 js

于 2022-03-25 09:21:54 首次发布

本文链接：https://blog.csdn.net/weixin_45439379/article/details/123727059

版权

js 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

css隔离方案:shadow-dom

文章目录

css隔离方案:shadow-dom
前言
一、shadow dom
- - - 给shadow dom 节点中的p标签添加样式不影响影子节点外的p标签的样式
二、mdn
总结

前言

约定项目前缀（既然是约定，肯定会有不遵守）
css-modules 打包时生成不冲突的选择器名
shadom dom 处理父子应用真正意义上的隔离

一、shadow dom

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
    <p>hello world</p>
    <div id="shadow"></div>
  </div>
  <script>
    let shadowDOM = document.getElementById('shadow').attachShadow({mode:'closed'})
    let pElm = document.createElement('p')
    pElm.innerHTML = 'hello china'
    let styleElm = document.createElement('style')
    styleElm.textContent = `p{color:red}`
    shadowDOM.appendChild(styleElm)
    shadowDOM.appendChild(pElm)

  </script>
</body>
</html>

给shadow dom 节点中的p标签添加样式不影响影子节点外的p标签的样式

二、mdn

mdn：shadow-dom
在这里插入图片描述

总结

single-spa 以及微qiankun, 可以实现css真正意义上的隔离

weixin_45439379

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css隔离方案:shadow-dom

css隔离方案:shadow-dom文章目录css隔离方案:shadow-dom前言一、shadow dom给shadow dom 节点中的p标签添加样式不影响影子节点外的p标签的样式二、mdn总结前言约定项目前缀（既然是约定，肯定会有不遵守）css-modules 打包时生成不冲突的选择器名shadom dom 处理父子应用真正意义上的隔离一、shadow dom<!DOCTYPE html><html lang="en"><head> <
复制链接

扫一扫