Interrupción de los cambios en la CSS personalizada en ThingWorx 9.3.0
Se ha quitado un polyfill de ThingWorx 9.3.0, lo que puede hacer que la CSS personalizada deje de funcionar al actualizar una versión anterior de ThingWorx.
 |
Solo las CSS personalizadas se ven afectadas por este cambio. Las personalizaciones que se realicen mediante el editor de temas de estilo en Composer o mediante las propiedades de estilo de widget de Mashup Builder no se ven afectadas.
|
En este tema se describen el problema y la directiva de PTC para romper los cambios en las CSS personalizadas en ThingWorx 9.3.0.
Contexto
Cuando se añaden widgets de componente Web a ThingWorx, los exploradores Web no incluyen soporte oficial para la especificación CSS Shadow Parts. Por lo tanto, se ha utilizado un polyfill (ptcs-shadow-style) para proporcionar soporte para la sintaxis CSS ::part. Este polyfill implementaba una versión temprana de la especificación que se actualizó posteriormente.
A medida que cambiaba la especificación CSS Shadow Parts y los exploradores Web empezaron a proporcionar soporte oficial para la sintaxis ::part, el polyfill se quitó de ThingWorx 9.3.0. La eliminación del polyfill tiene las siguientes ventajas:
• Mejora el rendimiento, ya que el uso de las implementaciones nativas de la API del explorador es mucho más rápido.
• Alinea la implementación de ThingWorx de la sintaxis CSS ::part con la versión más reciente de la especificación que se implementa de forma nativa en exploradores Web.
Los widgets de componentes Web ahora solo soportan implementaciones de explorador nativos de la especificación. Algunos aspectos del polyfill inicial ya no se soportan porque la versión más reciente de la especificación es más restrictiva. Determinados selectores de CSS soportados anteriormente ya no funcionarán. No se pueden utilizar selectores de CSS que apliquen estilos a las subpartes en función de su posición en el árbol DOM.
Por ejemplo, ya no se soportan los siguientes selectores:
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) {
...
}
El documento de especificación está en estado borrador desde noviembre de 2018 y puede actualizarse en el futuro. Además, la estructura de los componentes Web de PTC puede cambiar al continuar mejorando la biblioteca de Web Component SDK en una versión futura de ThingWorx.
Solución alternativa
Se recomienda encarecidamente utilizar CSS con moderación al definir el estilo de los mashups. La CSS personalizada requiere que se verifiquen y se corrijan manualmente los problemas de estilo al actualizar la versión de ThingWorx. Para evitar este proceso, utilice temas de estilo y propiedades de estilo para personalizar el aspecto de los mashups y widgets siempre que sea posible.
El impacto de este cambio en la CSS personalizada es similar al actualizar a la versión 9.3.0, 9.3.1, 9.3.2 y 9.3.4 y versiones posteriores. Sin embargo, en la versión 9.3.4, se añadió soporte para el uso de declaraciones @supports, con el fin de incluir un objeto ptcs-style-unit, lo que ofrece mayor flexibilidad a la hora de acceder a las piezas de Shadow DOM. Sin embargo, aún se pueden aplicar CSS personalizadas sin utilizar este método. Este cambio no afecta a los componentes Web nuevos introducidos en la versión 9.3 o posterior.
Para obtener más información, consulte los siguientes recursos: