Skip to content

Etiqueta: Light DOM

Prepare sus componentes LWC para Shadow DOM nativo en Spring ’24 ☁️

Prepare sus componentes LWC para Shadow DOM nativo en Spring '24 ☁️

El shadow DOM nativo hará que tus componentes LWC estén más alineados con los estándares web, las nuevas características de los navegadores y un rendimiento mejorado.

The post Prepare sus componentes LWC para Shadow DOM nativo en Spring ’24 appeared first on Blog de desarrolladores de Salesforce.

Seguir leyendo

Desmitificando Light DOM y sus casos de uso ☁️

Desmitificando Light DOM y sus casos de uso ☁️

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.

Desmitificando Light DOM y sus casos de uso | Blog de desarrolladores de Salesforce

Light DOM es una función de Lightning Web Components que ha estado disponible de forma general en Lightning Experience, Experience Cloud, LWC OSS (código abierto) y todas las versiones de la aplicación móvil Salesforce desde Summer '23 .

Los componentes web Lightning, de forma predeterminada, se representan en DOM oculto , lo que proporciona una encapsulación y seguridad sólidas para sus componentes. Sin embargo, al mismo tiempo, evita el estilo global y bloquea las integraciones de terceros que introspeccionan el interior de sus componentes. Light DOM es una característica que se puede habilitar de forma granular en componentes seleccionados, de modo que Shadow DOM no los afecte.

¿Cómo funciona el DOM ligero?

Usemos un componente web Lightning muy simple como ejemplo.

holaCodey.html

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

Hello Codey!

«>

holaCodey.js

En el ejemplo anterior, el DOM oculto predeterminado del componente evita que una regla CSS definida en el componente principal o el host alcance el elemento <p> . Además, no permite que el código JavaScript externo al componente consulte el elemento <p> mediante las API de consulta del navegador.

Para activar el DOM ligero para un componente, debe especificar el renderMode ligero en su archivo JavaScript y la directiva de plantilla lwc:render-mode en la etiqueta <template> del componente. Ambos cambios son necesarios debido a la forma en que se compilan los componentes web Lightning.

holaCodey.html

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

Hello Codey!

«>

holaCodey.js

Cuando activa el DOM claro en un componente, el marcado del componente se adjunta al elemento anfitrión en lugar de a su árbol de sombra. Luego puede acceder al marcado desde otros componentes de la página como cualquier otro contenido en el host del documento que no esté protegido por Shadow DOM.

Los componentes DOM ligeros permiten el uso de API de consulta de navegador estándar como querySelector y querySelectorAll . En este caso, en lugar de usar this.template.querySelector , debes usar this.querySelector .

holaCodey.js

O más simplemente, a menudo puedes usar la directiva lwc:ref en ambos casos (componentes DOM sombreados y claros) y omitir el querySelector .

holaCodey.html

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

Hello Codey!

«>

holaCodey.js

Cuándo usarlo y cuándo no usarlo

Light DOM es una opción para cada componente individual. Sus efectos no se aplicarán a otros componentes a menos que también opten por participar. Tenga en cuenta que los componentes base siempre se representan en DOM oculto.

Recomendamos habilitar DOM ligero si tiene bibliotecas que necesitan acceder a los componentes internos mediante API de consulta de navegador estándar, aplicar estilos globales o necesita más flexibilidad para implementar las mejores prácticas de accesibilidad, siempre y cuando el componente no exponga datos confidenciales. Cubriremos estos casos de uso con más profundidad en la siguiente sección.

No recomendamos habilitar DOM ligero para un componente si ese componente aparece o funciona con datos confidenciales. El uso de DOM ligero elimina la encapsulación de DOM en sombra y expone los componentes al raspado de DOM. Por lo tanto, tenga en cuenta esta importante consideración.

Casos de uso habilitados por DOM ligero

Light DOM permite varios casos de uso que anteriormente no eran compatibles.

1) Soporte de bibliotecas que necesitan acceso a las partes internas de un componente

Light DOM permite el uso de bibliotecas que necesitan acceso a los componentes internos. Un buen ejemplo de esto son las bibliotecas de análisis utilizadas en los sitios de Experience Cloud, como Google Analytics, ya que necesitan acceso a los componentes internos para obtener mejores resultados.

Podemos probar este caso de uso, incluido el componente helloCodey anterior, en un componente principal mascotChanger de la siguiente manera.

mascotChanger.html

<dx-code-block title language="html" code-block="
«>

mascotChanger.js

Tenga en cuenta que, aunque el párrafo consultado pertenece al componente helloCodey , podemos acceder a él con this.template.querySelector , porque pertenece al DOM ligero secundario. Sin embargo, si el componente helloCodey no tuviera habilitado el DOM ligero, querySelector habría devuelto null .

También puede acceder a los componentes internos del DOM ligero desde un script que se carga como un recurso estático en la página, siempre y cuando todos los componentes ancestros estén habilitados para el DOM ligero. Por ejemplo, en un sitio LWR Experience Cloud, que es DOM completamente ligero, puede agregar un recurso estático de JavaScript que encuentre los componentes internos helloCodey de la siguiente manera.

myJSResource.js

2) Implementación más sencilla de componentes profundamente anidados

Otro ejemplo en el que esto puede resultar útil es implementar componentes complejos y profundamente anidados. En ese caso, es posible que prefiera tener un único componente DOM de sombra en el nivel superior y componentes DOM claros dentro para evitar gastos generales. Por ejemplo, un componente de tabla de datos personalizado puede tener solo un gran componente DOM de sombra alrededor de todo, en lugar de una sombra para cada fila y celda de la tabla.

Esta implementación facilita la consulta de sus propios elementos desde el componente de nivel superior de su jerarquía y también la implementación de la accesibilidad. Además, hay una ligera mejora en el rendimiento en algunos casos de uso al usar DOM claro sobre DOM sombreado, lo que se debe principalmente a la sobrecarga de simplemente crear nodos de sombra adicionales.

3) Estilo global

Light DOM también facilita el estilo global, ya que permite que los estilos CSS caigan en cascada en el marcado del componente. Por ejemplo, un componente DOM ligero puede establecer un estilo que se carga y luego se aplica una vez para todos los componentes DOM ligeros de la página. La inyección de estilos globales a través de DOM ligero solo se admite en sitios de Experience Cloud, editor de contenido CMS o Sales Enablement.

Por ejemplo, definamos un componente colorChanger de la siguiente manera.

colorChanger.html

<dx-code-block title language="html" code-block="
«>

colorChanger.js

colorChanger.css

El color de fondo azul se aplicará a los párrafos de todas las instancias del componente helloCodey en la página, ya que está habilitado para DOM claro.

En la mayoría de los casos, no querrás que tu estilo se filtre a otros componentes. Eso todavía es posible para componentes DOM ligeros. Solo necesita colocar esas reglas de estilo en un archivo *.scoped.css , para que tengan como alcance el componente DOM ligero. El CSS con alcance está escrito exactamente igual que el CSS normal, pero solo se aplicará a ese componente sin filtrarse.

Tenga en cuenta que si las reglas de estilo se cargan globalmente como recursos estáticos en una página de Lightning Experience o un sitio de Experience Cloud, se les quitará el alcance y se aplicarán tanto a los componentes DOM claros como también a los componentes DOM de sombra, ya que la sombra sintética no evitará que se filtren. Esta es una limitación que se solucionará una vez que la sombra nativa sea totalmente compatible (actualmente en Developer Preview ). Cuando la sombra nativa está habilitada, solo los componentes habilitados para DOM claro heredarán los estilos globales.

4) Implementación más flexible de las mejores prácticas de accesibilidad

Light DOM permite que un componente haga referencia a la i d un elemento que vive en otro componente separado habilitado para Light DOM. Esto le permite vincular dos elementos utilizando los atributos i d y aria , lo que le otorga flexibilidad adicional para implementar las mejores prácticas de accesibilidad en sus proyectos. Mejoremos nuestro componente mascotChanger para demostrar esto.

mascotChanger.html

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

«>

mascotChanger.js

mascotaNombreInput.html

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

«>

mascotaNombreEtiqueta.html

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

«>

Tenga en cuenta que Salesforce está trabajando actualmente con el W3C para agregar nuevos estándares, de modo que el DOM oculto nativo pueda participar en estos patrones de accesibilidad. Esto significa que, en el futuro, este caso de uso ligero de DOM no será necesario. Como parte de nuestros esfuerzos de accesibilidad, también patrocinamos a Igalia para implementar parcialmente ARIA Element Reflection , que ahora es totalmente compatible con Safari y parcialmente con Chrome. Si quieres saber más sobre este tema, echa un vistazo a nuestra propuesta cross-root-aria , el repositorio para el grupo de trabajo Modelo de objetos de accesibilidad .

La siguiente tabla resume los casos de uso y dónde se admiten.

Experiencia en la nube Experiencia relámpago Aplicaciones móviles de Salesforce LWC OSS/LWR en Node.js*
Soporte de bibliotecas que necesitan acceso a las partes internas de los componentes.
Implementación más sencilla de componentes profundamente anidados
Estilo global No No
Implementación más flexible de las mejores prácticas de accesibilidad

*Si se utiliza DOM de sombra nativo en lugar de sombra sintética . La sombra nativa es la opción predeterminada para LWC OSS y LWR en Node.js.

Otras Consideraciones

Cuando se trabaja con DOM ligero, hay algunas consideraciones adicionales a tener en cuenta, entre ellas:

  • Los eventos no se reorientan con DOM ligero. Lea más en la guía para desarrolladores .
  • No hay soporte de navegador para espacios fuera del DOM oculto, por lo que se emula. Esto implica que algunas funciones, como los enlaces de ciclo de vida, no están disponibles en ellos. Eche un vistazo a la documentación para saber más.
  • Por ahora, los componentes ligeros habilitados para DOM no se pueden empaquetar.

Conclusión

En esta publicación de blog, revisamos qué es el DOM ligero, los casos de uso que permite y las consideraciones a tener en cuenta para decidir qué componentes habilitarán la función. Todos los ejemplos que se muestran en este blog se encuentran en un repositorio de GitHub que puedes probar tú mismo.

Para obtener más información sobre DOM ligero en la plataforma Salesforce, lea la documentación o, si está trabajando fuera de la plataforma, lea la documentación OSS .

Si decide seguir adelante y transformar sus componentes DOM ocultos en componentes DOM claros, consulte esta herramienta creada por Salesforce Engineering para simplificar la migración.

Sobre el Autor

Alba Rivas trabaja como Principal Developer Advocate en Salesforce. Puedes seguirla en Linkedin , Twitter o GitHub .

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

Añadir a holgura Suscríbete a RSS

Seguir leyendo

Aspectos destacados de la versión para desarrolladores | Aprende Moar Verano '23 ☁️

Aspectos destacados de la versión para desarrolladores | Aprende Moar Verano '23 ☁️

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.

Aspectos destacados de la versión para desarrolladores | Aprende Moar Verano '23 | Blog de desarrolladores de Salesforce

¡Haz un gran revuelo con el lanzamiento de Summer '23!

Sabemos que cada versión trae consigo muchas funciones nuevas y sorprendentes, y puede haber mucho que digerir. Con Learn MOAR, empaquetamos el lanzamiento y se lo ofrecemos en un formato fácil de digerir con blogs, videos y más.

¡Es fácil empezar!

  • ¡Explore los trailmixes de Trailhead con aspectos destacados de lanzamiento clave para desarrolladores o administradores, o ambos!
  • ¡Únase a nosotros para Release Readiness Live ! Los expertos en productos y los defensores de los desarrolladores analizarán y demostrarán las nuevas funciones en el lanzamiento de Summer '23 y, al final de nuestra transmisión, responderemos sus preguntas. Sintonice a las 9 am PT el 19 de mayo para la sesión de desarrolladores. ¿No puedes unirte a nosotros en vivo? La grabación se publicará unas horas después de que finalice la transmisión.

Siga y complete un trailmix de Learn MOAR Summer '23 para administradores o desarrolladores para obtener una insignia exclusiva de la comunidad.

Introducción

¡El lanzamiento de Summer '23 está aquí y está repleto de funciones para desarrolladores! En esta publicación de blog, resumiremos los aspectos más destacados, para que pueda obtener una descripción general de las novedades y decidir qué es lo más interesante para usted. En publicaciones posteriores de Learn MOAR, profundizaremos en algunos de estos aspectos destacados, para que pueda explorarlos con mayor detalle. Mantenerse actualizado con las últimas innovaciones lo ayudará a aumentar su experiencia y convertirse en un desarrollador más exitoso.

Componentes web Lightning

Comencemos hablando de Lightning Web Components, que presentará una gran cantidad de nuevas funciones en Summer '23.

Un par de funciones que estaban en Beta ahora estarán disponibles de forma general (GA). Esto incluye DOM ligero , que permite integraciones de terceros y estilo global, Lightning Web Security para LWC y Aura , que facilita el uso de bibliotecas de JavaScript de terceros en LWC. La API RefreshView , que le permite actualizar la vista de un componente, también será GA. Además, el adaptador de cable GraphQL se está moviendo a Beta, lo que significa que puede probarlo de inmediato, sin tener que registrarse para el programa piloto. Esto cambiará las reglas del juego sobre cómo se leen los datos en Lightning Web Components.

Hay varias mejoras en la sintaxis de LWC que facilitarán la escritura de sus componentes. Se está lanzando una nueva directiva de plantilla lwc:spread (consulte los documentos ), que le permite distribuir propiedades de objetos a un componente secundario, lo que reduce significativamente la cantidad de código que necesita escribir. A partir de Summer '23, podrá establecer un valor dinámico para el atributo de ranura de un elemento HTML. Además, se habilitará la inyección programática de hojas de estilo, lo que le permitirá establecer la propiedad estática de las hojas de estilo para un componente.

¿Ha comenzado a escribir pruebas de extremo a extremo con UTAM? Esta versión también trae mejoras a las capacidades de manejo de errores de UTAM y una extensión de Chrome para identificar objetos de página de UTAM (en Beta).

Móvil sin conexión

Salesforce Mobile App Plus (Salesforce App+) es una versión de la aplicación Salesforce Mobile que habilita LWC Offline. LWC Offline es un entorno de tiempo de ejecución avanzado para componentes web Lightning que aumenta el tiempo de ejecución estándar con funciones diseñadas específicamente para uso móvil y sin conexión. Si bien LWC Offline anteriormente solo estaba disponible en la aplicación móvil Salesforce Field Service, Salesforce App+ le permite usarlo en un contexto más genérico. Salesforce App+ se cerró en Beta en Spring '23 y se trasladará a GA en Summer '23. Salesforce App+ está disponible bajo la licencia Salesforce Mobile Plus.

Integración de plataforma

Tener una plataforma robusta es tan importante como tener capacidades de integración sólidas. Es por eso que la versión Summer '23 trae muchas funciones de integración nuevas.

En esta versión, ampliamos la API REST de Salesforce para admitir la recuperación de elementos secundarios mediante la definición de hasta cinco niveles de consultas SOQL anidadas . También ampliamos la API REST de Connect y la API de Connect (Connect in Apex) para permitir que los desarrolladores creen y administren credenciales con nombre mediante programación. Además, la API GraphQL, que se hizo GA en Spring, ahora admitirá consultas con funciones agregadas y mejorará sus capacidades de manejo de errores . Los eventos de la plataforma también incluyen nuevas funciones, como la capacidad de agregar una clase de devolución de llamada a su código de publicación de Apex , que proporcionará una confirmación cuando el evento de la plataforma se publique correctamente. Además, podrá obtener métricas de uso de eventos de la plataforma consultando el objeto PlatformEventUsageMetric .

También se están mejorando las capacidades de integración en Flow. Flow Builders ahora podrá configurar llamadas HTTP GET a sistemas externos que no tienen una especificación de API abierta a través de la función Servicios externos. Las llamadas HTTP POST están en Beta. Si es un Muley , puede leer más sobre las innovaciones de Flow plus MuleSoft en la siguiente sección.

Además de todo esto, el adaptador GraphQL de Salesforce Connect que anunciamos en febrero se mudará a GA, y Event Relay ahora admitirá Shield Platform Encryption y tendrá una nueva interfaz de usuario de configuración fácil de usar.

Innovaciones entre nubes

Aunque MuleSoft, Tableau y Slack siguen sus propios ciclos de lanzamiento, son partes integrales del ecosistema de Salesforce y de vital importancia para los desarrolladores.

Mula Suave

Una de las innovaciones más recientes de MuleSoft es Anypoint Code Builder (Beta), el IDE de próxima generación de MuleSoft para diseñar, desarrollar e implementar API, integraciones y automatización desde un solo entorno. ¡Compruébalo si aún no lo has hecho!

Si leyó la sección "Integración de la plataforma" anterior, es posible que haya recibido un spoiler: MuleSoft se está integrando en Flow más que nunca. En Summer '23, habrá una nueva sección en la interfaz de usuario de configuración de Salesforce Platform, desde la cual podrá configurar y administrar los servicios de MuleSoft , que luego se pueden usar en Flow Builder. Además, el soporte de MuleSoft se está agregando a Flow Orchestrator , lo que facilita la creación de procesos comerciales automatizados de varios pasos que utilizan los servicios de MuleSoft.

Por último, se lanzará Anypoint Experience Hub . Es la próxima evolución de Anypoint API Community Manager y permite a los clientes crear portales de API en minutos para una mejor participación de API.

Cuadro

Si trabaja con API, es posible que esté familiarizado con la colección Postman de API de Salesforce . Esta colección se ha vuelto muy popular y es ampliamente adoptada en el ecosistema de Salesforce, con actualmente más de 500 bifurcaciones y más de 800 estrellas. Tableau recientemente se subió al carro al agregar sus propias muestras de la API REST de Tableau a la colección. Para obtener más información, lea nuestra entrada de blog .

Si le gustó la colección, le encantará la innovación más reciente de Tableau, cuya vista previa pública se anunció en la Conferencia de Tableau (TC) 2023 del 9 al 11 de mayo. El nuevo Tableau Embedding Playground ofrece a los desarrolladores un entorno de aprendizaje interactivo para desarrollar rápidamente soluciones de análisis integradas. Integre visualizaciones de Tableau y agregue rápidamente interacciones que establezcan filtros y parámetros, obtengan marcas y datos seleccionados, utilizando los componentes básicos de los métodos y las propiedades de la API de incorporación. En el futuro, use sus propias visualizaciones en Tableau Cloud, Tableau Server o Tableau Public para desarrollar sus aplicaciones personalizadas con código que puede exportar y ejecutar en cualquier lugar.

La diversión no se detiene ahí. Para admitir análisis integrados personalizados y seguros, Tableau introdujo recientemente dos nuevas funciones de usuario que permiten a los desarrolladores y administradores pasar cualquier atributo de usuario en tiempo de ejecución dentro del flujo de autenticación integrado. Para obtener más información, leanuestra entrada de blog .

Flojo

Finalmente, nos complace compartir que Slack acaba de anunciar la disponibilidad general de su plataforma Slack de próxima generación. En la nueva plataforma, puede crear aplicaciones modulares mediante el desarrollo de componentes básicos, como funciones, flujos de trabajo y activadores, mediante TypeScript y Deno . Ahora puede implementar en la infraestructura administrada por Slack, ahorrando tiempo y aumentando la eficiencia. En el futuro, los usuarios de Slack podrán aprovechar cada capacidad que ofrece y combinarlas con otras funciones, servicios y proveedores de software para crear automatizaciones potentes y personalizadas. La plataforma también incluye una CLI, que puede usar para desarrollar, probar e implementar sus funciones y flujos de trabajo. Para obtener más información al respecto y obtener experiencia práctica, diríjase a la guía de inicio rápido .

Aprende MOAR

Nuestros gerentes de producto y defensores de desarrolladores están de vuelta para compartir las últimas características y funcionalidades que llegarán en Summer '23. Para ayudarlo a desarrollarse más rápido, hay una gran cantidad de contenido nuevo del equipo de relaciones con desarrolladores que cubre sus nuevas características favoritas. ¡Asegúrese de consultar Release Readiness Live el viernes 19 de mayo a las 9:00 a. m. PST, y lea lo último en el blog de desarrolladores de Salesforce para conocer más innovaciones relacionadas con desarrolladores en el lanzamiento de Summer '23!

Sobre el Autor

Alba Rivas trabaja como Principal Developer Advocate en Salesforce. Actualmente se enfoca en el desarrollo de Lightning Web Components y Slack. Puedes seguirla en Twitter o Linkedin .

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

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

Aprenda MOAR en Summer '22 con Release Highlights para desarrolladores ☁️

¡Descubra las nuevas características de la versión Summer '22 para administradores y desarrolladores! Sabemos que cada versión trae consigo muchas funciones nuevas y sorprendentes, y puede haber mucho que digerir. Con Learn MOAR, estamos empaquetando el lanzamiento y presentándolo en un formato fácil de digerir en blogs, videos y más. Buceo […]

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

Seguir leyendo