草庐IT

Angular样式隔离(style isolation)及选择器(:host, :host-context, ::ng-deep)的使用

1.Angular样式隔离Angular样式隔离的好处最最要的一条就是CSS的可维护性。当没有样式隔离时,我们创建一个组件并添加样式后,可能会影响到其他的组件样式,而且很有可能查找不出问题所在。虽然我们可以想出办法来避免样式被覆盖,但是可能会引发CSS的可维护性问题。Angular的视图封装(ViewEncapsulation)在Angular中,组件的样式可以封装在组件的宿主元素中(host),这样它们就不会影响应用程序的其他部分。视图封装模式:1.ViewEncapsulation.ShadowDom:Angualr使用浏览器内置的ShadowDomAPI将组件的视图封装在ShadowRo

overflow 使得 transform-style 失效了

配图源自Freepik这周做了一个需求,出现了Bug,经排查后发现:同一元素同时设置overflow:hidden和transform-form:preserve-3d样式,会使得后者失去3D效果,也就是相当于transform-form:flat。下面用示例验证一下:.constainer区域设置了transform-style:preserve-3d;.red区域设置了transform:translate3d(20px,20px,10px);.green区域设置了transform:translate3d(0,0,5px);?.container{margin:0auto;border-

overflow 使得 transform-style 失效了

配图源自Freepik这周做了一个需求,出现了Bug,经排查后发现:同一元素同时设置overflow:hidden和transform-form:preserve-3d样式,会使得后者失去3D效果,也就是相当于transform-form:flat。下面用示例验证一下:.constainer区域设置了transform-style:preserve-3d;.red区域设置了transform:translate3d(20px,20px,10px);.green区域设置了transform:translate3d(0,0,5px);?.container{margin:0auto;border-