Mashup Builder > 样式主题 > 将自定义 CSS 样式应用于 Web 组件小组件 > ThingWorx 9.3.0 中自定义 CSS 的中断性变更
ThingWorx 9.3.0 中自定义 CSS 的中断性变更
ThingWorx 9.3.0 中移除了填充代码,这可能导致自定义 CSS 在从先前版本的 ThingWorx 升级时停止工作。
* 
只有自定义 CSS 会受此变更的影响。使用 Composer 中的样式主题编辑器或使用 Mashup Builder 中的小组件样式属性进行的任何自定义均不受影响。
ThingWorx 9.3.0 中对自定义 CSS 进行了中断性变更,本主题介绍了与之相关的问题和 PTC 策略。
背景
将 Web 组件小组件添加到 ThingWorx 时,Web 浏览器不包含对 CSS 阴影部分规范的官方支持。因此,填充代码 (ptcs-shadow-style) 用于支持 CSS ::part 语法。此填充代码实现了早期版本的规范,规范于后期进行了更新。
随着 CSS 阴影部分规范的更改以及 Web 浏览器开始为 ::part 语法提供官方支持,ThingWorx 9.3.0 中移除了填充代码。这样做有以下好处:
可提高性能,因为使用浏览器 API 的本机实现可显著提高速度。
使 CSS ::part 语法的 ThingWorx 实现与在 Web 浏览器中本机实现的最新版本规范保持一致。
Web 组件小组件现仅支持规范的本机浏览器实现。由于最新版本的规范更加严格,因此不再支持初始填充代码的某些功能。以前支持的某些 CSS 选择器将不再受支持。不能使用基于子部件在 DOM 树中的位置对其应用样式的 CSS 选择器。
例如,以下选择器不再受支持:
ptcs-chart-line::part(legend)::part(grid){
...
}
.blue > .widget-ptcslist::part(list-item):nth-child(even) {
...
}
规范文档自 2018 年 11 月起一直处于草拟状态,未来可能会予以更新。此外,PTC Web 组件的结构可能会发生更改,因为未来的 ThingWorx 版本会继续改进 Web Component SDK 库。
解决方法
强烈建议在设置混搭样式时谨慎使用 CSS。使用自定义 CSS 需在升级 ThingWorx 版本时手动检查并修复所有样式问题。要避免此过程,请尽可能使用样式主题和样式属性自定义混搭和小组件的外观。
升级到 9.3.0、9.3.1、9.3.2 和 9.3.4 及更高版本后,对自定义 CSS 进行此更改的影响大同小异。但 9.3.4 中添加了支持使用 @supports 语句来包括 ptcs-style-unit,这使得用户在访问 Shadow DOM 部件时更具灵活性。然而,用户仍可应用自定义 CSS 而非上述方法。9.3 或更高版本中引入的新 Web 组件不受此变更影响。
有关详细信息,请参阅以下资源。
这对您有帮助吗?