当前位置: 首页 > Web前端 > CSS

SAPSpartacus的CSS架构

时间:2023-03-30 13:29:04 CSS

在Angular中,组件的CSS样式被封装到它自己的视图中,而不会影响应用程序的其余部分。您可以通过在组件的元数据上设置视图封装模式来单独控制每个组件的封装模式。有如下几种可选的封装模式:ShadowDom模式:使用浏览器原生的ShadowDOM实现,可以参考MDN上的ShadowDOM文档为组件的宿主元素附加一个ShadowDOM。组件的视图附加到这个ShadowDOM,组件的样式也包含在这个ShadowDOM中。记忆方式:不进不出,没有样式可以进入,组件样式不能退出。)Emulated模式(默认值)通过预处理(和重命名)CSS代码来模拟ShadowDOM的行为,从而将CSS样式限制在组件视图中。只有进出,全局样式可以进来,组件样式不能出去。您可以像操作常规DOM一样操作ShadowDOM——例如添加子节点、设置属性以及为节点添加您自己的样式(例如通过element.style属性),或者为整个ShadowDOM添加样式(例如在style元素中添加样式)。不同的是,ShadowDOM内部的元素永远不会影响它外部的元素(除了:focus-within),这为封装提供了便利:注意,无论怎么看,ShadowDOM都不是什么新鲜事物——过去很长一段时间,浏览器都是用它来封装一些元素的内部结构。以带有默认播放控制按钮的