Breaking Changes to Custom CSS in ThingWorx 9.3.0
A polyfill was removed in ThingWorx 9.3.0, which can cause custom CSS to stop working when upgrading from a previous version of ThingWorx.
 |
Only custom CSS is affected by this change. Any customizations that are performed using the style theme editor in Composer or using widget style properties in Mashup Builder are not affected.
|
This topic describes the issue and the PTC policy for breaking changes to custom CSS in ThingWorx 9.3.0.
Background
When web-component widgets were added to ThingWorx, web browsers did not include official support for the CSS Shadow Parts specification. Therefore, a polyfill (ptcs-shadow-style) was used to provide support for the CSS ::part syntax. This polyfill implemented an early version of the specification that was later updated.
As the CSS Shadow Parts specification changed and as web browsers started to provide official support for the ::part syntax, the polyfill was removed in ThingWorx 9.3.0. Removing the polyfill has the following benefits:
• It improves performance as using the native implementations of the browser API is much faster.
• It aligns the ThingWorx implementation of the CSS ::part syntax with the latest version of the specification that is implemented natively within web browsers.
Web-component widgets now only support native browser implementations of the specification. Some aspects of the initial polyfill are no longer supported because the latest version of the specification is more restrictive. Certain CSS selectors that were previously supported will no longer work. You cannot use CSS selectors that apply styling to sub-parts based on their position in the DOM tree.
For example, the following selectors are no longer supported:
ptcs-chart-line::part(legend)::part(grid){
...
}
.blue > .widget-ptcslist::part(list-item):nth-child(even) {
...
}
...
}
.blue > .widget-ptcslist::part(list-item):nth-child(even) {
...
}
The specification document has been in a draft state since November 2018 and may be updated in the future. In addition, the structure of PTC web components may change as we continue to enhance the Web Component SDK library in future release of ThingWorx.
Workaround
We strongly recommend that you use CSS sparingly when styling your mashups. Using custom CSS requires that you manually check and fix any styling issues when upgrading your version of ThingWorx. To avoid this process, use style themes and style properties to customize the look and feel of your mashups and widgets whenever possible.
The impact of this change to custom CSS is similar when upgrading to 9.3.0, 9.3.1, 9.3.2 and 9.3.4 and later. However, in 9.3.4 we added support for using an @supports statements to include a ptcs-style-unit, which provides you with more flexibility when accessing shadow DOM parts. However, you can still apply custom CSS without using this method. New web components that were introduced in 9.3 or later are not affected by this change.
For more information, refer to the following resources: