新專案使用Ionic 4, Ionic 4的元件使用了shadow DOM和CSS4變數。

我們需要注意API文件中的 CSS Custom Properties

假如我們想要修改ion-item元件的背景顏色。

我們可以在home.page.scss中這樣寫：

ion-item {
    --ion-item-background-color-active: #000;
    --min-height: 100px;
}

在 theme/variables.scss中 使用 :root 選擇器進行全域性修改：

:root {
    --ion-item-background-color-active: #000;
}
 

關於Ionic v4的shadow DOM推薦這篇文章
《Shadow DOM Usage in Ionic Web Components》

關於CSS4變數可以參考《A Primer on CSS 4 Variables for Ionic 4》

還有一篇關於Ionic slot《Understanding How Slots are Used in Ionic 4》