Cambios en la estructura del DOM interno del componente Lightning base para compatibilidad futura con sombras nativas ☁️

Salesforce está preparando los componentes base de Lightning para adoptar Shadow DOM nativo , lo que mejorará el rendimiento de los componentes y los alineará mejor con los estándares de los componentes web. Como parte de esta fase de preparación, hemos cambiado la estructura DOM interna de algunos de nuestros componentes. Recién comenzamos y continuaremos modificando las partes internas de los componentes en versiones posteriores. En esta publicación, discutiremos qué cambiará y cómo puede prepararse para ello.

¿Qué es el DOM de sombra nativo?

Shadow DOM es un estándar web que encapsula la estructura del modelo de objeto de documento (DOM) interno de un componente web. Esto nos da la capacidad de proporcionarle componentes robustos y seguros protegiéndolos de ser manipulados por HTML, CSS y JavaScript arbitrarios.

Actualmente, Salesforce mantiene un polyfill de sombra sintético para navegadores heredados, como versiones anteriores de Microsoft Edge, pero ahora que todos los principales navegadores admiten DOM de sombra nativo, estamos preparando nuestros componentes para hacer lo mismo.

Con la introducción del shadow DOM nativo, mejoraremos la encapsulación de los componentes, haciéndolos más consistentes y seguros, y brindaremos una forma más predecible de diseñarlos. Esto resolverá una gran cantidad de problemas de compatibilidad con versiones anteriores y alineará los componentes web Lightning con los estándares web.

Sin embargo, puede provocar una fase de adaptación a medida que hacemos el cambio.

La implementación interna de los componentes básicos está cambiando

Hemos estado trabajando en la preparación de nuestros componentes base para adoptar el shadow DOM nativo. Los escenarios específicos en los que se rompía la encapsulación de los componentes base requerían que creáramos un nuevo elemento contenedor dentro del límite de la sombra. Para ayudar a ilustrar esto, veamos un componente base de ejemplo llamado lightning-foo . Antes, el componente se veía así:

<dx-code-block title language code-block="

Example base component

«>

A partir de Summer '23, se verá así:

<dx-code-block title language code-block="

«>

La mecánica interna de los componentes básicos no se diseñó para acceder directamente y tratarse como una API confiable para su uso. En cambio, nuestros componentes preempaquetados estaban destinados a usarse tal como son, utilizando las API públicas oficiales que hemos compartido abiertamente. Sin embargo, sabemos que algunos clientes están utilizando componentes internos de manera no documentada. Si está accediendo a los elementos internos de un componente base con fines de personalización y prueba, tenga en cuenta estos cambios.

¿Cómo puede arreglar su código personalizado y sus pruebas?

Al probar manualmente sus aplicaciones, es posible que detecte un componente personalizado que funcionaba anteriormente y que no tiene el aspecto esperado. Debido a estos cambios, sus pruebas automatizadas de un extremo a otro también pueden fallar. En ambos casos, puede significar que su código personalizado o código de prueba depende de las partes internas de un componente base que ha cambiado . Exploremos estos dos problemas con más profundidad:

Un componente no se ve como se esperaba:

• Problema: Intentar diseñar el elemento o las clases personalizadas dentro de un componente base puede generar resultados imprevistos.
• Solución: El cambio de sombra sintética a componentes totalmente encapsulados con DOM de sombra nativo puede cambiar su estrategia de CSS. Al migrar sus personalizaciones de estilo a la sombra nativa, siga estos pasos:
  • Consulte la disponibilidad de un gancho para peinar . Ofrecen un excelente método para adaptar un componente sin profundizar en las complejidades del CSS subyacente o el shadow DOM.
  • Asegúrese de que el valor que está aplicando al gancho de estilo esté vinculado a su sistema de diseño en lugar de un valor fijo y predefinido. Evite usar un valor codificado.

Una prueba de extremo a extremo falla:

• Problema: Cualquier implementación que use combinadores CSS fallará. Por ejemplo, lightning-foo > p no coincidirá con nuestro marcado actualizado.
• Solución: Los combinadores hacen que el CSS sea frágil y deben evitarse a menos que se usen por una buena razón. La mayoría de las veces, los combinadores se pueden eliminar sin ninguna regresión. Si se desea un elemento específico, se pueden usar otros métodos de orientación que no se basen en el marcado que nunca cambia. Es decir, evite apuntar explícitamente a elementos HTML siempre que sea posible. Use otros selectores disponibles, como clases que permiten que su uso de CSS sea abstracto, modular y separado del elemento HTML. Si sus pruebas se basan en combinadores de CSS, le recomendamos que adopte el Modelo de automatización de pruebas de interfaz de usuario (UTAM) para evitar cambios importantes en el futuro, ya que los objetos de la página se mantienen actualizados con todos los cambios de componentes.

Conclusión

En resumen, estamos logrando avances significativos al preparar los componentes base de Lightning para adoptar Shadow DOM nativo, lo que garantizará un mejor rendimiento y la alineación con los estándares de los componentes web, además de mejorar la seguridad y la confiabilidad de los componentes. Al encapsular la estructura DOM interna, nos esforzamos por brindar una experiencia más sólida y predecible tanto para los desarrolladores como para los usuarios.

Si bien estos cambios pueden presentar algunos desafíos iniciales, son pasos necesarios hacia un sistema más estandarizado y preparado para el futuro. Seguimos comprometidos a informar y apoyar a los desarrolladores durante esta transición.

En preparación para estos cambios, recomendamos adoptar ganchos de estilo y métodos de orientación como clases para garantizar que el uso de CSS siga siendo modular y adaptable. Además, recomendamos enfáticamente adoptar UTAM como su solución de prueba de extremo a extremo.

Estén atentos a más actualizaciones y cambios a medida que Salesforce continúa optimizando y mejorando el marco de componentes Lightning. Al adoptar estas próximas mejoras, los desarrolladores pueden esperar una experiencia de desarrollo más fluida y eficiente mientras crean aplicaciones poderosas en la Plataforma Salesforce.

Más recursos

Sobre los autores

Maeve Tuntivate es Gerente sénior en el equipo de Gestión de productos en Salesforce.

Jesse Brack es ingeniero principal de UX en el equipo de ingeniería de sistemas de diseño de Salesforce.