微前端中实现样式隔离

最新推荐文章于 2025-01-07 16:26:28 发布

Lyrelion

最新推荐文章于 2025-01-07 16:26:28 发布

阅读量1.2k

点赞数 1

分类专栏：微前端文章标签：样式隔离 qiankun

本文链接：https://blog.csdn.net/Lyrelion/article/details/119150078

版权

本文探讨了微前端中常见的样式隔离方法，包括Shadow DOM、CSS In JS、Scoped CSS和CSS Modules，并详细介绍了qiankun提供的strictStyleIsolation和experimentalStyleIsolation两种隔离模式，以及它们在处理element-plus等组件时遇到的问题和解决方案。总结了在样式隔离中应注意的规则，以避免样式全局污染。

摘要由CSDN通过智能技术生成

2.1 strictStyleIsolation 严格模式

2.2 experimentalStyleIsolation 实验性

2.3 使用 qiankun 样式隔离方案的问题

2.4 使用 qiankun 样式隔离方案的问题的具体表现

2.4.1 element-plus 字体图标异常

2.4.2 element-plus 组件挂载到 body 上时样式丢失

2.4.3 相同代码，是否开启隔离的效果不同

2.5 总结

1. 常见隔离方式

1.1 Shadow DOM

使用 shadow DOM - Web Components | MDNhttps://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_shadow_DOMShadow DOM 允许将隐藏的 DOM 树附加到常规的 DOM 树中

它以 shadow root 节点为起始根节点，在这个根节点的下方，可以是任意元素，和普通的 DOM 元素一样
Shadow DOM 内部的元素，始终不会影响到它外部的元素

qiankun 实现样式隔离的原理，就是基于 Shadow DOM

null原文地址距 qiankun 开源已过去了 11 个月，...https://www.yuque.com/kuitos/gky7yw/viueoh#12833e35qiankun 隔离效果如图所示：

1.2 CSS In JS

顾名思义，这种方案使用 js 写 css，完全不需要些单独的 css 文件（所有的 css 代码全部放在组件内部，以实现 css 的模块化）

缺点：违背 js、css 分离的原则

举个栗子：

import React from "react";
import styled from "styled-components";

// 创建一个带样式的 h1 标签
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
`;

// 创建一个带样式的 section 标签
const Wrapper = styled.section`
  background: papayawhip;
`;

// 通过属性动态定义样式
const Button = styled.button`
  background: ${props => (props.primary ? "palevioletred" : "white")};
  color: ${props => (props.primary ? "white" : "palevioletred")};
  border: 2px solid palevioletred;
`;

// 样式复用
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

<Wrapper>
  <Title>Hello World, this is my first styled component!</Title>
  <TomatoButton primary>Primary</TomatoButton>
</Wrapper>;