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

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>

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/

Blog

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

GabrielOmar

Sintáxis de Lit

Join Our Newsletter. No Spam, Only the good stuff.

Related