DEV Community

Cover image for 🚀Una revisión rápida a los web components con Lit 🔥
GabrielOmar
GabrielOmar

Posted on

🚀Una revisión rápida a los web components con Lit 🔥

En este post tendremos una pequeña vista de como crear web components utilizando Lit 2.0 el cual hace esta tarea bastante sencilla. Además, nos da la libertad de escalar tanto como lo necesitemos. Ya sea agregando unit testing, story books, patrones de diseño, entre otros.

Personalmente, he tenido mayor experiencia trabajando con Stenciljs pero con esta librería he encontrado un mundo de posibilidades a la hora de agregar componentes independientes o módulos a una aplicación sea ya creada o una que apenas comienza.

Sintáxis de Lit

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

export class ExampleComponent extends LitElement {
  static styles = css`p { color: blue }`;

  static get properties() {
    name: {type: String},
  };

  constructor() {
    super();
    this.name = 'Somebody';
  }

  render() {
    return html`<p>Good, ${this.name}! 🚀</p>`;
  }
}
customElements.define('example-component', ExampleComponent );

Enter fullscreen mode Exit fullscreen mode

En este punto es importante mencionar que lit puede trabajar con Typescript o Javascript y elegir entre uno de ellos va a depender de que necesitamos para nuestro proyecto. Asimismo, los componentes de Lit están basados en class components, tienen un ciclo de vida y manejan un método render donde usualmente muestran el HTML del componente.

La forma de llamar a nuestro componente es tan sencilla como:

<!DOCTYPE html>
<head>
  <script type="module" src="./example-component.js"></script>
</head>
<body>
  <example-component name="Gabriel"></example-component>
</body>
Enter fullscreen mode Exit fullscreen mode

Algo que hace interesante a Lit, es el peso de sus componentes ya que son bastante ligeros en comparación a otras librerías generadoras de web components.

Invito a probar esta librería en su link oficial = () => https://lit.dev/

Top comments (0)