因為 ionic v4 元件在 ionic 官方團隊製作當下時，沒有提供 parts 屬性作為選擇元件底下特定 slot 或元素的依據，所以在 shadow root 時，很難做到官方教學文件和方法以外的客製化樣式，若遇到被自動放在 slot="" 時，將變得更困難。 Ionic 官方在 v5 開始提供元件裡的 parts，作為客製化樣式的解決方法，但因為我服務的公司產品，仍然使用 ionic v4 ，短期內沒有餘裕升級到 ionic v5 ，所以需要尋求 v4 環境的解決方法。

情境

html 檔案內容

<ion-toolbar>
    <ion-title>這是一個很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長的名稱<ion-title>
</ion-toolbar>

ion-toolbar {

    ion-title {
    /*
    * 無法選到 ion-title, 因為它不在 ionic v4 官方文件裡說明的任一個可用 slot 裡
    */
    }
}

ion-title 在上述內容會落在 ion-toolbar 的 slot="" ，但這無法對它做官方文件以外的客製化樣式，官方文件只提供 --color 改變文字顏色的方式。如果我們要做 text-wrap: wrap，會因為選擇不到 ion-title ，而無法達成目標。

解決方法

調整後的 html 和 scss 檔案內容如下:

<ion-toolbar>
    <ion-title data-title="my-title">
        <span>這是一個很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長的名稱</span>
    </ion-title>
</ion-toolbar>

ion-toolbar {

    ion-title[data-title*="my-title"] span {
        text-wrap: wrap;
    }
}

這樣會令 span 元素跳脫在 ion-title 裡的 shadow root 之外，而且善用 css attribute selector 方式的威力，選到 ion-title，就能達成我們想要客製化樣式的目標。

這個方式也能應用在 ion-item 上。