> Faqs > Cómo usar Light DOM en un componente Lit en lugar de Shadow DOM

Cómo usar Light DOM en un componente Lit en lugar de Shadow DOM

Voy a publicar esta pregunta y su respuesta que siempre me cuesta encontrar la solución.

¿Cómo es posible configurar un componente de Lit para que trabaje con el Light DOM en lugar del Shadow DOM?

Ver solución más abajo... y si alguien no sabe lo que es esto puede consultar la FAQ: Qué se conoce como Light DOM

Etiquetas:

  • Web Components
  • Lit
  • Custom Element
  • Shadow DOM
  • Light DOM
  • DOM Local

Respuestas

Esta configuración es muy sencilla en Lit. Simplemente hay que añadir un método en el componente:

createRenderRoot() {
  return this;
}

Esto nos sirve para evitar que el template del componente se renderice en el Shadow DOM. En lugar de ello se renderizará en el DOM local, evitando algunos problemas que surgen en los custom elements cuando trabajamos con el Shadow DOM, principalmente cuando hacemos uso de algunas librerías que necesitan acceder al DOM del componente como si estuviera directamente dentro del documento, o cuando queremos que los estilos globales afecten a los elementos del template del componente.

El problema de esta técnica es que se pierde la posibilidad de trabajar con slots, lo que a veces representa una limitación importante.

Ejemplo de componente Lit que usa el light DOM en lugar del Shadow DOM

Por si no ha quedado claro dejo un ejemplo de componente Lit que usa el Light DOM, a veces también llamado DOM Local.

import { LitElement, html, css } from 'lit';

export class MyComponent extends LitElement {
  static styles = [
    css`
      :host {
        display: inline-block;
      }
      span {
        display: inline-block;
        border: 1px solid #303030;
        padding: 0.7rem 1rem;
        background-color: #f5f5f5;
      }
    `
  ];

  createRenderRoot() {
    return this;
  }

  render() {
    return html`
      <span>Soy el componente y uso light dom</span>
      
      `;
  }
}
customElements.define('my-component', MyComponent);
Miguel Angel
3140 140 209 17