1. Angular
(1)Angular.js (1.x) - 没有样式集成能力
(2)Angular(2+)
- 提供了样式封装能力
- 与组件深度集成
(3)ShadowDOM
- 逻辑上一个DOM
- 结构上存在子集结构
(4)Scoped CSS
- 限定了范围的CSS
- 无法影响外部元素
- 外部样式一般不影响内部
- 可以通过/deep/或>>>穿透
(5)模拟Scoped CSS
- 方案一:随机选择器(不支持)
- 方案二:随机属性
<div abcdefg></div> div[abcdefg]{ }
2. Vue
(1)模拟Scoped CSS
- 方案一:随机选择器
css modules
- 方案二:随机属性
<div abcdefg></div> div[abcdefg]{ }
3. React
(1)官方没有集成方案
(2)社区方案众多
- css modules
- (babel)react-css-modules
- styled components
- styled jsx