Angular 元件樣式 及一些特殊的選擇器
github Source code 希望透過了解預設的 Angular 樣式機制（模擬封裝）在底層的工作原理來幫助我們更清楚的如何使用 Angular 所提供的一些特殊選擇器(如： :host、:host-context、::ng-deep等)的用法。 在下面的實作過程將會使用到下列技術: Angular cli 16 Angular 16 Router Standalone component CSS & SCSS 瀏覧器的開發者工具 CSS 的樣式污染 css 沒有作用域的概念，這就導致 css 在書寫的時候都是全局作用域。造成開發者在撰寫過程中會造成因 classname 相同而產生樣式污染及 css 規則層疊(CSS Cascade)。 隨著 SPA 應用的興起，全部的 css 會在同一個環境中同時進行加載，相互影響的問題更加嚴峻。 Angular 元件樣式原理 Angular 以元件組合為基本原理來建構一支 web application，在 Angular 元件中預設採用的“檢視封裝”(View encapsulation)是“ViewEncapsulation.Emulated” (模擬封裝)。在這個設定值下 Angular 會修改元件的 CSS 選擇器，使它們只應用於元件的檢視，不影響應用程式中的其他元素(模擬 Shadow DOM 行為)。 建立 Angular Web Application 使用 npm init 指令建立一支 web application:...