120.乾坤css隔离机制

• 确保单实例场景子应用之间的样式隔离，但是无法确保主应用跟子应用、或者多实例场景的子应用样式隔离

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