Aprenda MOAR en Summer '22 con Lightning Web Components ☁️

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.

…

Siga y complete un trailmix de Learn MOAR Summer '22 para administradores o desarrolladores antes del 31 de julio de 2022 a las 11:59 p. Se aplican restricciones. Aprenda cómo participar y revise las reglas oficiales visitando la página de Trailhead Quests .

Los componentes Lightning continúan evolucionando con muchas características nuevas excelentes que estarán disponibles de forma general en la versión Summer '22. Estas actualizaciones mejoran el rendimiento, le permiten exponer sus componentes a bibliotecas de terceros y lo ayudan a ampliar sus componentes con nuevos módulos. En esta publicación de blog, analizaremos nuevas funciones, como DOM ligero y módulos de notificación, que pueden ayudarlo a mejorar el desarrollo de su componente Lightning.

Presentamos el DOM ligero

Antes de que realmente podamos analizar qué es el DOM de luz o cómo puede ayudarlo, primero debemos recapitular el DOM de sombra . Si ha dedicado tiempo a crear componentes web Lightning, está más que familiarizado con shadow DOM, ya que se utiliza para proteger sus componentes de la manipulación. Hace muchas cosas geniales para sus componentes, como protegerlos de filtraciones de CSS desde su padre o la página, ocultarlos del DOM dentro del árbol de sombra y mucho más.

Todos los beneficios de shadow DOM son excelentes, sin embargo, a veces es posible que desee exponer sus componentes a la página. Es por eso que hemos implementado un DOM ligero, que le permite abrir sus componentes a la página y evitar las limitaciones del DOM oculto. Esto hace que sea mucho más fácil heredar estilos globales de su página e integrarse con bibliotecas de terceros.

Consideraciones y limitaciones

Hay algunas diferencias entre el DOM de luz y el DOM de sombra que vale la pena señalar. En primer lugar, cuando renderizas en DOM ligero, no hay árbol de sombras ni raíces de sombras. Esto significa que la forma de acceder a los contenidos será diferente. Con shadow DOM, primero debe llamar a la plantilla usando this.template.querySelector() para llegar al interior del componente. Ahora con DOM ligero, puede usar this.querySelector() directamente ya que no hay plantilla ni árbol de sombras.

También debe tener en cuenta que los estilos no tienen alcance: todos los estilos que se han establecido en el nivel superior de la página se filtrarán en su componente. Los eventos ya no se reorientan y sus eventos serán accesibles a nivel de página. Por último, los elementos de tragamonedas son fundamentales para el árbol de sombras y no se renderizarán cuando estén en el DOM claro.

Comience con DOM ligero

Es muy fácil comenzar con DOM ligero. Lo primero que debe hacer es comprender qué componentes necesita exponer fuera de la sombra. Una vez que haya completado un análisis de riesgo, es tan fácil como actualizar los archivos HTML y JS de los componentes web Lightning que le gustaría habilitar. No hay un interruptor global para el DOM ligero, debe habilitarse componente por componente.

En el archivo HTML de los componentes, solo deberá establecer una propiedad de clase estática llamada render-mode y establecerla en "ligero".

 <template lwc:render-mode='luz'> <mi-encabezado> <p>Hola mundo</p> </mi-encabezado>
</plantilla>

Luego, en el archivo JS, deberá crear una propiedad renderMode y establecerla en light (el valor predeterminado es shadow ).

 importar { LightningElement } desde 'lwc'; exportar la clase predeterminada LightDomApp extiende LightningElement { modo de renderizado estático = 'luz'; // el valor predeterminado es 'sombra'
}

Nuevos componentes básicos

A fines de 2021, los principales proveedores de navegadores lanzaron cambios importantes que ya no permitirían a los desarrolladores usar los .alert() , .confirm( .confirm() y .prompt() . Aquí en Salesforce, hemos actuado muy rápidamente para crear tres nuevos componentes básicos para ayudarlo a continuar usando estas funciones.

Se puede acceder a los módulos directamente dentro de sus componentes web Lightning existentes. Por ejemplo, para usar el componente de alerta, solo necesitará importar LightningAlert desde lightning/alert .

Para abrir la alerta, puede simplemente llamar a LightningAlert.open() .

 Alerta de relámpagos.open({ mensaje: 'este es el mensaje de alerta', //la etiqueta por defecto es "Alerta" variante: 'sin encabezado',
}).entonces((resultado) => { console.log('resultado de la alerta', resultado);
});

Modo de sombra mixta

Actualmente en Developer Preview: puede crear componentes en modo de sombra mixta . Ahora que todos los principales navegadores admiten shadow DOM, obtiene la velocidad y la eficiencia de usar la sombra nativa tanto como sea posible en su aplicación. En los casos en los que no se admita el DOM de sombra nativo, el modo de sombra mixta utilizará el relleno sintético de sombra actual.

Por ejemplo, si configuramos un componente shadowSupportMode en any , seleccionará la implementación de sombra correcta para el navegador.

 importar { LightningElement } desde 'lwc'; la clase predeterminada de exportación extiende LightningElement { shadowSupportMode estático = 'cualquiera';
}

Este componente se renderizará con DOM de sombra nativo en Chrome, Edge, Firefox y Safari, y utilizará la sombra sintética en Edge e IE11 heredados.

Aprende MOAR esta semana

Ahora conoce todas las nuevas y excelentes actualizaciones del componente web Lightning. Si tiene preguntas, diríjase a Trailblazer Community y pregúntenos en el grupo Salesforce Developer Trailblazers .

Los gerentes de producto y el equipo de relaciones con los desarrolladores están de regreso para compartir las características y funcionalidades más recientes en Summer '22. Para ayudarlo a desarrollarse más rápido, el nuevo contenido de Developer Relations cubrirá sus nuevas funciones favoritas. Además, asegúrese de consultar Release Readiness Live el viernes 20 de mayo de 2022 a las 9:00 a. m. PST . Por último, esté atento al blog de desarrolladores de Salesforce todos los días de esta semana para obtener más publicaciones sobre Summer '22.

Para obtener aún más información, consulte la mezcla de senderos Summer '22 .

Sobre el Autor

Stephan Chandler-Garcia es desarrollador evangelista sénior en Salesforce. Se centra en el desarrollo de aplicaciones, la seguridad y Experience Cloud. Puedes seguirlo en Twitter @stephanwcg .