架構師_程序員

 找回密碼
 注冊[Register]

QQ登錄

只需一步,快速開始

查看: 83|回復: 0
打印 上一主題 下一主題

[Angular] angular encapsulation 的三種使用方式

[復制鏈接]
跳轉到指定樓層
樓主
發表于 2020-5-12 11:02:24 | 只看該作者
根據最新版的官網文檔顯示,encapsulation現在有4個屬性值了:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';



Emulated 默認項

樣式有范圍封裝,父組件不影響子組件的樣式 (angular提供的樣式封裝機制)
?? 該選擇是默認項,即在不手動配置encapsulation 的情況下,就是該值。在該配置項下,各組件有范圍,父組件無法影響自組件。如果非要在該配置項下,讓父組件的樣式 覆蓋子組件的樣式??梢允褂?::ng-deep ,但是官網不推薦使用 ::ng-deep


None

不提供任何封裝,樣式直接應用到整個document。 (向下影響自己的子組件,向上影響自己的父組件)


Native和Shadow

使用原生的shadow封裝樣式,dom結構中可以看到陰影根(shadow-root),我們可以很好地看到樣式是如何寫入它的,只對shadow-root 范圍內的組件有效。





上一篇:css 樣式:pointer-events: none
下一篇:CSS 網頁div、table滾動條美化
帖子永久地址: 

架構師_程序員 - 論壇版權1、本主題所有言論和圖片純屬會員個人意見,與本論壇立場無關
2、本站所有主題由該帖子作者發表,該帖子作者與架構師_程序員享有帖子相關版權
3、其他單位或個人使用、轉載或引用本文時必須同時征得該帖子作者和架構師_程序員的同意
4、帖子作者須承擔一切因本文發表而直接或間接導致的民事或刑事法律責任
5、本帖部分內容轉載自其它媒體,但并不代表本站贊同其觀點和對其真實性負責
6、如本帖侵犯到任何版權問題,請立即告知本站,本站將及時予與刪除并致以最深的歉意
7、架構師_程序員管理員和版主有權不事先通知發貼者而刪除本文

碼農網,只發表在實踐過程中,遇到的技術難題,不誤導他人。
您需要登錄后才可以回帖 登錄 | 注冊[Register]

本版積分規則

免責聲明:
碼農網所發布的一切軟件、編程資料或者文章僅限用于學習和研究目的;不得將上述內容用于商業或者非法用途,否則,一切后果請用戶自負。本站信息來自網絡,版權爭議與本站無關。您必須在下載后的24個小時之內,從您的電腦中徹底刪除上述內容。如果您喜歡該程序,請支持正版軟件,購買注冊,得到更好的正版服務。如有侵權請郵件與我們聯系處理。

Mail To:help@itsvse.com

QQ|Archiver|手機版|小黑屋|架構師 ( 魯ICP備14021824號-2 )|網站地圖

GMT+8, 2020-7-12 08:07

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回復 返回頂部 返回列表
捕鸟达人老版