Esta es una traducción que desde EGA Futura ofrecemos como cortesía a toda la Ohana y comunidad de programadores, consultores, administradores y arquitectos de Salesforce para toda Iberoamérica.
El enlace a la publicación original, lo encontrarás al final de este artículo.
…
El framework Lightning Web Components (LWC) ha estado utilizando shadow DOM, un estándar de navegador que proporciona encapsulación y composabilidad para componentes web. Ahora, LWC está permitiendo el acceso a las capacidades nativas proporcionadas por los navegadores modernos para hacer que shadow DOM funcione aún mejor. Este cambio tiene el potencial de mejorar el rendimiento, la capacidad y la compatibilidad de los componentes LWC. Sin embargo, pueden ser necesarios algunos pasos para garantizar que los componentes estén listos para el nuevo shadow DOM nativo introducido en Spring ’24.
Para preparar el terreno, se ofrece una breve lección de historia sobre por qué shadow DOM funciona como lo hace en LWC. LWC fue uno de los primeros grandes marcos de componentes web en utilizar shadow DOM. Mientras que el resto de la web se ha ido poniendo al día, LWC se enfrentó a desafíos como adoptante temprano. Cuando se introdujo LWC en 2017, shadow DOM tenía poca compatibilidad con los navegadores compatibles con Salesforce. Para admitir navegadores heredados como Internet Explorer 11, se necesitaba una versión sintética de shadow DOM. Sin embargo, el shadow DOM sintético no era un polyfill completo y tenía algunas limitaciones.
Con el fin de la compatibilidad con IE11 y la disponibilidad de nuevas funciones de shadow DOM en los navegadores modernos, LWC está abandonando el shadow DOM sintético y adoptando el shadow DOM nativo. Para facilitar una migración fluida, LWC introduce el modo mixto de shadow DOM, que permite a los autores de componentes optar por shadow DOM nativo componente por componente. Los componentes pueden migrar gradualmente en lugar de hacer un cambio disruptivo de todo o nada.
Existen algunas consideraciones para migrar a DOM shadow nativo. No todos los componentes base de Lightning admiten actualmente DOM shadow nativo, por lo que hay que tener cuidado al migrar componentes que contengan referencias a componentes base. El estilo global también puede verse afectado, ya que los estilos en la sombra sintética pueden filtrarse hacia dentro pero no hacia fuera, mientras que la sombra nativa restringe los estilos para que no se filtren hacia dentro o hacia fuera. Es posible que los ID y los atributos de accesibilidad no funcionen en árboles DOM de sombra nativa separados. También se mencionan otras pequeñas diferencias entre el shadow DOM sintético y el nativo.
Para comprobar si un componente se ejecuta en modo nativo o sintético mediante programación, se puede evaluar la propiedad `this.template.synthetic`. Si se evalúa como `undefined`, el componente se está ejecutando en shadow DOM nativo.
La migración a shadow DOM nativo debería acercar los componentes LWC a los estándares web, a las nuevas características de los navegadores y a la mejora del rendimiento. El shadow DOM nativo ayuda a desbloquear la visión original de LWC como un marco basado en estándares que adopta las capacidades nativas del navegador. Se proporcionan recursos e información sobre los autores para mayor referencia.
…
Esta es una traducción realizada por EGA Futura, y este es el link a la publicación original: https://developer.salesforce.com/blogs/2024/01/get-your-lwc-components-ready-native-shadow-dom.html
