JobPlus知识库 IT 软件开发 文章
关于Angular样式封装

引导

这是一个很简单的话题,但是你很难在搜索到一篇比较完整的介绍它的文章,或者说单纯的告诉你 ViewEncapsulation 的用法而已,这在实际项目中远远不够的。

一、封装模式

分别为:

  • Native 原先浏览器Shadow DOM行为。
  • Emulated 仿真模式,通过Angular来模拟类似Shadow DOM的行为。
  • None 无任何封装行为。

以上三种模式唯一的区别在于Shadow DOM,当然其作用是让组件的样式只进不出,换言之即组件内的样式不会影响到外部组件。有关于Shadow DOM更多的细节不在这里讨论。

三者的表现形式

假定使用以下代码:


如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

¥ 打赏支持
485人赞 举报
分享到
用户评价(0)

暂无评价,你也可以发布评价哦:)

扫码APP

扫描使用APP

扫码使用

扫描使用小程序