- 确保单实例场景子应用之间的样式隔离,但是无法确保主应用跟子应用、或者多实例场景的子应用样式隔离
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,从生成的代码中可以看出来

本文介绍了在乾坤框架中实现单实例和多实例场景下子应用的样式隔离,探讨了如何通过配置沙箱隔离及使用Shadow DOM技术。同时,文章提到了使用data-xxx属性类似Vue的scoped,以及在start方法中配置样式隔离。此外,还讨论了JavaScript与ES的重要知识点笔记。
最低0.47元/天 解锁文章
6877

被折叠的 条评论
为什么被折叠?



