样式隔离

一、样式隔离

MicroApp的样式隔离是默认开启的,开启后会以<micro-app>标签作为样式作用域,利用标签的name属性为每个样式添加前缀,将子应用的样式影响禁锢在当前标签区域。

.test {
  color: red;
}

/* 转换为 */
micro-app[name=xxx] .test {
  color: red;
}

但主应用的样式依然会对子应用产生影响,如果发生样式污染,推荐通过约定前缀或CSS Modules方式解决。

二、禁用样式隔离

禁用样式隔离分四个层次:

1、在所有应用中禁用

这主要通过start方法进行全局配置,设置后所有应用的样式隔离都会停止。

import microApp from '@micro-zoe/micro-app'

microApp.start({
  disableScopecss: true, // 默认值false
})

如果希望在某个应用中不受全局配置控制,可以设置disableScopecss='false'

<micro-app name='xx' url='xx' disableScopecss='false'></micro-app>

2、在某一个应用中禁用

设置后,当前应用的所有css都不会进行样式隔离。

<micro-app name='xx' url='xx' disableScopecss  disable-scopecss></micro-app>

3、在某一个文件中禁用

可以在你的css文件中使用以下格式的注释来禁用样式隔离:

/*! scopecss-disable */
.test1 {
  color: red;
}
/*! scopecss-enable */

你也可以对指定的选择器禁用样式隔离:

/*! scopecss-disable .test1, .test2 */
.test1 {
  color: red;
}
.test2 {
  color: yellow;
}
.test3 {
  color: green;
}
/*! scopecss-enable */

如果想在整个文件范围内禁用样式隔离,将 /*! scopecss-disable */ 注释放在文件顶部:

/*! scopecss-disable */
...

4、在某一行中禁用

在文件中使用以下格式的注释在某一特定的行上禁用样式隔离:

/*! scopecss-disable-next-line */
.test1 {
  color: red;
}

.test2 {
  /*! scopecss-disable-next-line */
  background: url(/test.png);
}

Note

上述注释规则都以叹号开头(d/*! */),这是因为在build时大部分项目会将css中的注释删除以压缩体积,叹号开头是cssnano在新窗口打开的一种规则,可以防止在build时注释被删除discardcomments在新窗口打开

我们以cssnano为例,是因为它是PostCSS中使用最广泛的压缩插件,如果你使用了另外的压缩工具,请根据实际情况调整,防止build后的注释被删除。

三、shadowDOM

shadowDOM具有更好的隔离性,但一些框架(如React)对shadowDOM的兼容性不好,请谨慎使用。

开启shadowDOM后,默认的样式隔离将失效。

开启方式:shadowDOM