Skip to content

Etiqueta: Componente Lightning

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

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

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.

…

Cambios en la estructura del DOM interno del componente Lightning base para la futura compatibilidad con sombras nativas | Blog de desarrolladores de Salesforce

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="

Example base component

«>

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.

Obtenga las últimas publicaciones de blog de desarrolladores de Salesforce y episodios de podcast a través de Slack o RSS.

Agregar a Slack Suscríbete a RSS

Seguir leyendo

Diferentes formas de hacer que el componente de la pantalla sea de solo lectura

Diferentes formas de hacer que el componente de la pantalla sea de solo lectura

Última actualización el 9 de abril de 2023 por Rakesh Gupta Gran idea o pregunta duradera: ¿Cómo hacer que el componente de pantalla sea de solo lectura? Objetivos: después de leer este blog, podrá: Agregar texto de solo lectura al componente de pantalla usando Display Text Agregar texto de solo lectura al componente de pantalla usando un Lightning Web personalizado

La publicación Diferentes formas de hacer que el componente de pantalla sea de solo lectura apareció primero en Automation Champion .

Seguir leyendo

Mejore la disponibilidad en su organización ☁️

Esté atento a estos antipatrones comunes y utilice estas estrategias para evitarlos y mejorar la disponibilidad en su organización.

La publicación Mejore la disponibilidad en su organización apareció por primera vez en el blog de desarrolladores de Salesforce .

Seguir leyendo

Habilite CDN para cargar Lightning Experience más rápido ☁️

Descubra cómo una red de entrega de contenido (CDN) puede aumentar su rendimiento y cómo puede habilitarla para su organización hoy.

La publicación Activar CDN para cargar Lightning Experience más rápido apareció primero en el blog de desarrolladores de Salesforce .

Seguir leyendo

Una inmersión profunda en el componente base LightningModal ☁️

Con el lanzamiento de Winter '23, ahora enviamos LightningModal, un componente Lightning base que simplifica la incorporación de modales en sus componentes.

La publicación Una inmersión profunda en el componente base LightningModal apareció primero en el blog de desarrolladores de Salesforce .

Seguir leyendo

Flujos de pantalla integrados en sus componentes web Lightning ☁️

Screen Flow permite a los desarrolladores y administradores crear interfaces de usuario y vincularlas a los datos de Salesforce, y utilizar componentes web Lightning como elementos de flujo.

La publicación Integrar flujos de pantalla en sus componentes web Lightning apareció por primera vez en el blog de desarrolladores de Salesforce .

Seguir leyendo

Agregar modal de superposición emergente en el componente web Lightning

Gran idea o pregunta duradera: ¿Cómo se utiliza el componente web lightning para mostrar la ventana modal? Objetivos: después de leer este blog, podrá: Comprender la diferencia entre alerta y modelo. Mostrar un modal con una superposición en el clic del botón. Mostrar otro componente web Lightning dentro.

La publicación Add Popup Overlay Modal in Lightning Web Component apareció primero en Automation Champion .

Seguir leyendo

Aprende MOAR en Winter '23 con Release Highlights para desarrolladores ☁️

¿Escuchaste? ¡Es la semana de Dreamforce! Sí, nuestra reunión familiar de Trailblazer finalmente está aquí, los días son un poco más cortos y los PSL han comenzado a resurgir en los menús de cerca y de lejos (eso es "Pumpkin Spice Lattes", pero si leyó eso y pensó en "Licencias de conjunto de permisos", entonces definitivamente eres uno de nuestra gente!). Todo esto […]

La publicación Learn MOAR in Winter '23 with Release Highlights for Developers apareció primero en el blog de desarrolladores de Salesforce .

Seguir leyendo

Cómo aprobar el examen de certificación

Última actualización el 16 de septiembre de 2022 por Rakesh Gupta Con un inmenso placer, me gustaría compartir que aprobé el examen de certificación Platform App Builder hace un mes. Me tomó 50 minutos revisar todas las preguntas antes de presionar el botón de enviar. Después de un clic más del

La publicación Cómo aprobar el examen de certificación de Salesforce Platform App Builder apareció primero en Automation Champion .

Seguir leyendo

¡Lanzamiento Winter'23 de las 5 mejores gemas del componente web Lightning de Salesforce!

Última actualización el 10 de septiembre de 2022 por Rakesh Gupta El marco moderno del componente Lightning es un marco de interfaz de usuario para desarrollar aplicaciones web dinámicas para dispositivos móviles y de escritorio. Como es el caso con cada lanzamiento, el último lanzamiento de Winter'23 está repleto de características ricas, ¡incluidas las características del componente Lightning recientemente agregado! Corrientemente,

La publicación ¡Lanzamiento Winter'23 de las 5 mejores gemas del componente web Lightning de Salesforce! apareció por primera vez en Automation Champion .

Seguir leyendo

Cómo aprobar el examen de certificación de consultor de servicio de campo de Salesforce

Después de temer y demorar un par de veces, finalmente reuní el coraje para presentarme hoy al examen de certificación de consultor de servicio de campo. Y logré pasarlo en mi segundo intento. Entonces, ¡sigue adelante en el 'Camino de ladrillos amarillos'! La primera vez que me presenté a este examen fue

La publicación Cómo aprobar el examen de certificación de consultor de servicio de campo de Salesforce apareció primero en Automation Champion .

Seguir leyendo

Personaliza tus aplicaciones con ganchos de estilo ☁️

Los ganchos de estilo pasaron a GA con el lanzamiento de Spring '22. Esta función abre la puerta a la personalización de los componentes básicos de Lightning y mucho más. Con los ganchos de estilo, puede cambiar fácilmente la apariencia de una interfaz de usuario estándar modificando algunas líneas de CSS: no debatiremos gustos y colores en esta publicación, pero […]

La publicación Personalice sus aplicaciones con ganchos de estilo apareció por primera vez en el blog de desarrolladores de Salesforce .

Seguir leyendo

Agregar componentes web Lightning en Mobile y Lightning Experience como pestañas

Última actualización el 24 de junio de 2022 por Rakesh Gupta Gran idea o pregunta persistente: ¿Cómo mostrar los componentes web Lightning en Salesforce mobile y Lightning Experience como fichas personalizadas? Objetivos: después de leer este blog, podrá: Comprender la diferencia entre los componentes de superficie en las páginas de App Builder y

La publicación Agregar componentes web Lightning en dispositivos móviles y Lightning Experience como pestañas apareció primero en Automation Champion .

Seguir leyendo

Crear un formulario con una barra de progreso en el componente web Lightning

Última actualización el 23 de junio de 2022 por Rakesh Gupta Gran idea o pregunta duradera: ¿Cómo crear un formulario con una barra de progreso en el componente web Lightning? Objetivos: después de leer este blog, podrá: Comprender qué es el campo de barra de progreso relámpago y cómo usarlo Crear un formulario

La publicación Crear un formulario con una barra de progreso en el componente web Lightning apareció primero en Automation Champion .

Seguir leyendo

Acceda a recursos estáticos, archivos de activos de contenido en Lightning Web Component

Última actualización el 20 de junio de 2022 por Rakesh Gupta Gran idea o pregunta duradera: ¿Cómo importar y usar recursos estáticos en el componente web Lightning? Objetivos: después de leer este blog, podrá: Comprender el propósito del recurso estático Usar el recurso estático en el componente web lightning Acceder

La publicación Acceso a recursos estáticos, archivos de activos de contenido en Lightning Web Component apareció primero en Automation Champion .

Seguir leyendo

Pase el valor del campo de entrada Lightning de un clic de botón al controlador de componentes web Lightning

Última actualización el 19 de junio de 2022 por Rakesh Gupta Gran idea o pregunta duradera: ¿Cómo pasar el valor del campo de entrada de rayos como parámetro al método de clase del controlador en el componente web Lightning? Objetivos: después de leer este blog, podrá: Comprender qué es un campo de entrada de rayos y cómo trabajar con

La publicación Pasar el valor del campo de entrada Lightning de un clic de botón al controlador de componentes web Lightning apareció primero en Automation Champion .

Seguir leyendo

Agregar cuadro de diálogo de confirmación, alerta y aviso al componente web Lightning

Gran idea o pregunta duradera: ¿Cómo mostrar una alerta, una confirmación o un aviso con el componente web lightning al realizar acciones específicas? Objetivos: después de leer este blog, podrá: Comprender la diferencia entre el cuadro de diálogo de alerta, confirmación o modelo de solicitud Agregar un modal de alerta dentro de su componente Lightning Web Agregar

La publicación Add Confirmation, Alert and Prompt Dialog Box to Lightning Web Component apareció primero en Automation Champion .

Seguir leyendo

Restablecer el campo de entrada Lightning al hacer clic en el botón en el componente web Lightning

Última actualización el 17 de junio de 2022 por Rakesh Gupta Gran idea o pregunta duradera: ¿Cómo restablecer el campo de entrada de rayos a su valor predeterminado o nulo? Objetivos: después de leer este blog, podrá: Restablecer el valor del campo de entrada a su valor predeterminado Restablecer el valor del campo de entrada a Nulo y mucho más

La publicación Restablecer el campo de entrada Lightning al hacer clic en un botón en el componente web Lightning apareció primero en Automation Champion .

Seguir leyendo

Componente de área de texto enriquecido para Screen Flow

Última actualización el 10 de junio de 2022 por Rakesh Gupta Gran idea o pregunta duradera: ¿Cómo agregar un campo de área de texto enriquecido a una pantalla de flujo? Objetivos: después de leer este blog, podrá: Crear un componente web Lightning para el flujo de pantalla Agregar un editor de propiedades personalizado para un

El componente de área de texto enriquecido posterior para el flujo de pantalla apareció por primera vez en Automation Champion .

Seguir leyendo

Escáner de código de barras para el flujo de pantalla con la API de BarcodeScanner

Última actualización el 8 de junio de 2022 por Rakesh Gupta Gran idea o pregunta duradera: ¿Cómo escanear y procesar un código de barras de Screen Flow? Objetivos: después de leer este blog, podrá: Usar la API BarcodeScanner en el componente web Lightning Crear un componente web Lightning para el flujo de pantalla con un

La publicación Escáner de código de barras para el flujo de pantalla con la API de BarcodeScanner apareció primero en Automation Champion .

Seguir leyendo

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

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. Aprende cómo participar y revisa las Reglas Oficiales visitando el […]

La publicación Aprenda MOAR en Summer '22 con Lightning Web Components apareció primero en el blog de desarrolladores de Salesforce .

Seguir leyendo

Auto crea un grupo privado de Chatter

Última actualización el 3 de marzo de 2022 por Rakesh Gupta Gran idea o pregunta duradera: ¿Cómo se crea automáticamente un grupo de chat con Salesforce Flow? Objetivos: esta publicación de blog nos ayudará a comprender lo siguiente Comprensión de las acciones rápidas Cómo utilizar la acción rápida en el caso de uso comercial de Salesforce Flow

La publicación Auto Creates a Private Chatter Group apareció primero en Automation Champion .

Seguir leyendo

¡Las 5 mejores gemas del componente Lightning del lanzamiento de Salesforce Spring'22!

Última actualización el 19 de enero de 2022 por Rakesh Gupta El marco moderno del componente web Lightning es un marco de interfaz de usuario para desarrollar aplicaciones web dinámicas para dispositivos móviles y de escritorio. Como es el caso con cada lanzamiento, el último lanzamiento de Spring'22 está repleto de características ricas que incluyen, el recién agregado

La publicación ¡ Las 5 mejores gemas del componente Lightning de Salesforce Spring'22 Release! apareció por primera vez en Automation Champion .

Seguir leyendo

Demostraciones de aplicaciones del Desafío para desarrolladores de la ASEAN ☁️

En los últimos meses, más de 3.000 participantes han estado aprendiendo a crear aplicaciones empresariales de Salesforce Developer Advocates y Trailhead como parte del Desafío para desarrolladores de la ASEAN. Todos los que se registraron y completaron el programa recibieron un vale de certificación de Salesforce de $ 200, y siete participantes enviaron aplicaciones que crearon para ser exhibidas en el Demo Day […]

La publicación App Demos From the ASEAN Developer Challenge apareció primero en el Blog de desarrolladores de Salesforce .

Seguir leyendo