Mashup Builder > 樣式主題 > 將自訂 CSS 樣式套用至 Web 元件小器具 > ThingWorx 9.3.0 中對自訂 CSS 的突破性變更
ThingWorx 9.3.0 中對自訂 CSS 的突破性變更
ThingWorx 9.3.0 中已移除 polyfill,當從之前版本的 ThingWorx 升級時,它可能會導致自訂 CSS 停止工作。
* 
只有自訂 CSS 會受此變更影響。使用 Composer 中的樣式主題編輯器或在 Mashup Builder 中使用小器具樣式內容執行的任何自訂都不受影響。
本主題描述在 ThingWorx 9.3.0 中對於自訂 CSS 的突破性變更的問題與 PTC 政策。
背景
將 web 元件小器具新增至 ThingWorx 時,Web 瀏覽器並不包括對於 CSS 陰影零件規格的官方支援。因此,polyfill (ptcs-shadow-style) 被用來提供對於 CSS ::part 語法的支援。此 polyfill 實行了稍後更新之規格的早期版本。
當 CSS 陰影零件規格變更,以及 web 瀏覽器開始為 ::part 語法提供官方支援時,ThingWorx 9.3.0 中已移除 polyfill。移除 polyfill 有下列優點:
它可以提生效能,因為使用瀏覽器 API 的原生實行速度要快得多。
它會使 CSS ::part 語法的 ThingWorx 實行與在 web 瀏覽器內原生實行的最新版本規格保持一致。
Web 元件小器具現在僅支援規格的原生瀏覽器實行。不再支援初始 polyfill 的某些部分,因為最新版本的規格限制更加嚴格。之前支援的某些 CSS 選取器將不再有效。您無法使用根據子零件在 DOM 樹中的位置為子零件套用樣式的 CSS 選取器。
例如,不再支援下列選取器:
ptcs-chart-line::part(legend)::part(grid){
...
}
.blue > .widget-ptcslist::part(list-item):nth-child(even) {
...
}
規格文件自 2018 年 11 月起一直處於草稿狀態,未來可能會更新。此外,隨著我們在未來的 ThingWorx 發行版本中繼續強化 Web 元件 SDK 程式庫,PTC web 元件的結構可能會變更。
因應措施
我們強烈建議您在設定混搭樣式時減少使用 CSS。使用自訂 CSS 需要您在升級 ThingWorx 版本時手動檢查及修正任何樣式問題。欲避免此程序,請盡可能使用樣式主題與樣式內容來自訂混搭與小器具的外觀與感受。
升級至 9.3.0、9.3.1、9.3.2、9.3.4 及更新版本時,此變更對自訂 CSS 的影響類似。但是,在 9.3.4 中,我們新增了使用 @supports 陳述式來包含 ptcs-style-unit 的支援,這可為您在存取陰影 DOM 零件時提供更大的彈性。但是,您仍可套用自訂 CSS,而不使用此方法。在 9.3 或更新版本中引入的新 web 元件不受此變更的影響。
如需詳細資訊,請參閱以下資源:
這是否有幫助?