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.
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.
…
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.
Usemos un componente web Lightning muy simple como ejemplo.
<dx-code-block title language="html" code-block="
Hello Codey!
«>
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.
<dx-code-block title language="html" code-block="
Hello Codey!
«>
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 .
O más simplemente, a menudo puedes usar la directiva lwc:ref en ambos casos (componentes DOM sombreados y claros) y omitir el querySelector .
<dx-code-block title language="html" code-block="
Hello Codey!
«>
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.
Light DOM permite varios casos de uso que anteriormente no eran compatibles.
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.
<dx-code-block title language="html" code-block="
«>
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.
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.
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.
<dx-code-block title language="html" code-block="
«>
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.
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.
<dx-code-block title language="html" code-block="
«>
<dx-code-block title language="html" code-block="
«>
<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. | Sí | Sí | Sí | Sí |
| Implementación más sencilla de componentes profundamente anidados | Sí | Sí | Sí | Sí |
| Estilo global | Sí | No | No | Sí |
| Implementación más flexible de las mejores prácticas de accesibilidad | Sí | Sí | Sí | Sí |
*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.
Cuando se trabaja con DOM ligero, hay algunas consideraciones adicionales a tener en cuenta, entre ellas:
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.
Alba Rivas trabaja como Principal Developer Advocate en Salesforce. Puedes seguirla en Linkedin , Twitter o GitHub .
Añadir a holgura Suscríbete a RSS
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.
…
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.
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.
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.
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:
Una prueba de extremo a extremo falla:
lightning-foo > p no coincidirá con nuestro marcado actualizado.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.
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.
Agregar a Slack Suscríbete a RSS
¿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 .
Última actualización el 17 de agosto de 2022 por Rakesh Gupta Actualmente, el lanzamiento de Winter'23 está disponible en el programa de prelanzamiento. El 26 de agosto, Sandboxes se actualizará, como resultado, su organización obtendrá la apariencia del lanzamiento de Winter'23. En esta versión, encontrará muchas características nuevas, como
La publicación Resumen rápido de la versión de Salesforce Winter'23 apareció primero en Automation Champion .
Seguir leyendo
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 .
Microsoft finalizará el soporte para Internet Explorer 11 el 15 de junio de 2022. A la luz de este anuncio, Salesforce planea finalizar su soporte para IE11 en la plataforma Lightning el 1 de enero de 2023. Estamos ampliando el soporte, limitado a problemas críticos, es decir, , detención del negocio y sin solución alternativa (Sev1 o superior) — para un […]
La publicación Fin del soporte para IE11 en la plataforma Lightning apareció primero en el blog de desarrolladores de Salesforce .
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 .
En Salesforce, la confianza es nuestro valor número uno. Cuando cree aplicaciones en la plataforma Salesforce, tenga la seguridad de que residen en un entorno seguro. Implementamos las mejores prácticas y estándares de seguridad de la industria en todas las capas, desde la infraestructura hasta el código de la aplicación. Brindamos múltiples opciones de configuración que le permiten implementar una seguridad de datos efectiva […]
La publicación Seguridad para desarrolladores de Salesforce apareció primero en el Blog de desarrolladores de Salesforce .
Lógica de negocio,Experiencia del desarrollador,Integración y APIs,Rendimiento,Sin categoría
Seguir leyendo