- 确保单实例场景子应用之间的样式隔离,但是无法确保主应用跟子应用、或者多实例场景的子应用样式隔离
start({sandbox : true})//沙箱隔离,
判断沙箱隔离的方法,发现直接设置sandbox=true是不行的,需要使用experimentalStyleIsolation
这个属性配置。
export function isEnableScopedCSS(sandbox: FrameworkConfiguration['sandbox']) {if (typeof sandbox !== 'object') {return false;}if (sandbox.strictStyleIsolation) {return false;}return !!sandbox.experimentalStyleIsolation;
}
{ strictStyleIsolation: true }
开启严格的样式隔离模式 ,shawod dom’
start({shadow:{ strictStyleIsolation: true }})
直观的可以看到,子应用的代码不是正常的dom,上面显示的shadow-root,先不管shadow-root是什么,接着往下看
experimentalStyleIsolation
给子应用加上自定义的data-xxx属性,相当于vue中我们通常使用的scoped,从生成的代码中可以看出来
在主应用中,通过配置sandbox
做到样式隔离
start({ sandbox: { strictStyleIsolation: true } });
在start得时候配置得参数,但是只有等到start函数里面 frameworkStartedDefer.resolve()
之后才能往下执行. registerMicroApps
只是准备好注册的应用配置信息,只有等调用了star