shadow影子css隔离

最新推荐文章于 2024-05-08 00:21:20 发布

haosicx

最新推荐文章于 2024-05-08 00:21:20 发布

阅读量753

点赞数 1

分类专栏： css js 文章标签： css 前端 vue.js

本文链接：https://blog.csdn.net/haosicx/article/details/123031674

版权

css 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

主应用和子应用之间的样式隔离

BDM 约定项目前缀 在样式前面加一个路径比如/vue下面的所有样式
– 这就也可以实现项目的个隔离但是既然是约定那就容易不遵守约定
css-modules 打包时候生成不冲突的选择器名
shadow 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>
  <p>我是dom元素p标签</p>
  <!-- 影子存放标签 -->
  <div id="shadow"></div>
  <script>
    // 创建一个影子shadow dom
    // mode:open / closed : 外界可以访问 /不可以访问
    let shaDowDom =  document.getElementById('shadow').attachShadow({mode:'closed'})
    // 我现在创建一个p标签
    let pElm = document.createElement('p')
    //写点内容
    pElm.innerHTML= '我是影子元素的p标签'
    // 创建一个style标签
    let styleElm = document.createElement('style')
    styleElm.textContent = `p{color:red ; background:pink}`
    
    //把创建的p标签和style标签   都插入到影子里去
    shaDowDom.appendChild(styleElm)
    shaDowDom.appendChild(pElm)
  </script>
</body>
</html>

在这里插入图片描述

微前端中css隔离大致方法

应用加载的时候 A应用身上有window.a切换B应用时候 B应用也可以访问window.a ( 使用的是同一个window ) 这样就会出问题
单应用切换沙箱: 创造一个干净的环境给子应用用 当切换时可以选择丢弃属性和恢复属性
– A应用切换B应用的时候 window.a要丢弃
– B应用切回A应用的时候 window.a要恢复

JS沙箱机制

快照沙箱
– 一年前拍一张 , 一年后拍一张 , 做对比 (然后把区别保存起来 )
– 丢弃的时候 : 回到一年前
– 恢复的时候 : 把其中的区别给恢复回来
代理沙箱 proxy
– 可以实现多应用沙箱把不同的应用用不同的代理来处理

haosicx

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
shadow影子css隔离

主应用和子应用之间的样式隔离BDM 约定项目前缀在样式前面加一个路径比如/vue下面的所有样式– 这就也可以实现项目的个隔离但是既然是约定那就容易不遵守约定css-modules 打包时候生成不冲突的选择器名shadow Dom 真正意义上的隔离shadow影子隔离基础概念给元素创建一个影子然后给这个影子添加样式这个样式只会添加在影子上不会影响dom上的元素实现方法创建影子标签<!DOCTYPE html><html lang="en
复制链接

扫一扫

专栏目录