样式隔离

一、样式隔离

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

.test {
  color: red;
}

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

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

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

这主要通过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>

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

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

可以在你的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 */
...

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

/*! 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具有更好的隔离性，但一些框架(如React)对shadowDOM的兼容性不好，请谨慎使用。

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

开启方式：shadowDOM