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

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);