frontend · lit, web components, typescript, widgets
Desarrollador Lit para web components y widgets que funcionan en cualquier sitio.
Un restaurante pega una etiqueta script y un elemento HTML en su sitio web, y aparece un flujo de reservas completo, sin importar con qué esté hecho el sitio. Ese widget lo construí con Lit, y también un botón de reserva para los socios aseguradores de una gran franquicia de cristales para autos. Puedo construir el suyo de la misma forma: chico, aislado de la página que lo rodea y embebible en cualquier lado.
- Stack
- Lit, TypeScript, Vite, Vitest
- Resultado
- Custom elements estándar, una etiqueta script
- En producción
- Un widget de reservas, un botón de reserva para socios
- Modalidad
- Como proyecto, en su equipo o como asesoría
- Horario
- Lun–vie 04:00–18:00 Buenos Aires 09:00–23:00 Berlín 03:00–17:00 Nueva York
- Disponible desde
- Q4 '26
Por qué Lit y no React, Angular o Vue
- Un elemento HTML estándar: un componente Lit es un custom element que el navegador conoce de fábrica. Funciona en HTML puro, en WordPress y dentro de apps React, Angular o Vue, y la página nunca necesita saber con qué se hizo.
- Estilos que no chocan: el Shadow DOM mantiene el CSS del widget adentro y el de la página afuera. El tema del sitio no puede romper el widget, ni el widget el sitio. Los colores y las fuentes se ajustan con CSS custom properties, que están pensadas justo para cruzar ese límite.
- Chico: Lit en sí pesa unos 5 KB comprimido. Un widget escrito en React, Angular o Vue trae su framework consigo, a una página que quizás ya carga otro.
- Cerca de la plataforma: los templates son template literals de JavaScript, sin compilador JSX ni DOM virtual, y Lit solo actualiza las partes que cambiaron. La API del elemento es un estándar del navegador, no una versión de framework que haya que seguir.
En producción: un widget de reservas para restaurantes
Para un proveedor de tecnología gastronómica construí un widget de reservas que los restaurantes embeben en su propio sitio con una etiqueta script y un elemento. Un botón abre un diálogo que guía al comensal por fecha, cantidad de personas, turno, horario y datos de contacto, con entradas para eventos, señas pagadas con Stripe, restaurantes con varios locales y horarios alternativos cuando el elegido está ocupado. Habla alemán (formal o informal, y la variante suiza), inglés, español, francés e italiano, viene en tres temas y toma sus colores de atributos o de CSS custom properties.
La primera descarga pesa unos 22 KB comprimida, con Lit incluido. El flujo en sí y cada idioma se cargan recién cuando hacen falta. El widget sale de un CDN: cada release tiene su propia URL que nunca cambia, y cada pull request un link de preview que se publica en el pull request. Las vistas previas de links en WhatsApp o Instagram nunca ejecutan JavaScript, así que un pequeño servicio Node en Dokploy renderiza en el servidor una página de reservas para cada restaurante, con el widget adentro.
En producción: un botón de reserva para socios aseguradores
Para una gran franquicia de cristales para autos construí un botón de reserva que los socios aseguradores ponen en sus propios sitios. El socio lo completa con los datos del cliente y del vehículo que ya tiene. Un clic los valida, crea un borrador de reserva y lleva al cliente al sitio de reservas para terminar, con esos datos ya cargados. Es un único archivo autónomo de unos 17 KB comprimido, con Lit incluido, con el estilo definido por completo con CSS custom properties.
Lit junto al resto del stack
No construiría una app web entera con Lit. Para una app con rutas, formularios y mucho estado, elijo Angular. Lit es para las partes que tienen que vivir en páginas que usted no controla: widgets, embebidos y design systems que comparten equipos con distintos frameworks. Una plataforma de reservas en Angular con un botón en Lit en los sitios de los socios es exactamente esa división.
Cómo podemos trabajar juntos
- Desarrollo de apps: un widget o una librería de componentes como proyecto, con un alcance por escrito, una demo cada semana, y el código es suyo.
- Staff augmentation: me sumo a su equipo para construir o mantener sus web components, part-time o full-time, desde tres meses.
- Asesoría: qué framework conviene para su widget o design system, o una revisión del que ya tiene, por hora o con un retainer mensual.
Preguntas frecuentes
¿Lit o React para un widget?
Dentro de su propia app, React es una buena opción. En el sitio de otro, un widget en React trae React consigo, quizás junto a otra versión que el sitio ya carga, y sus estilos comparten la página con el CSS del sitio. Un widget en Lit es un elemento HTML estándar: unos 5 KB de librería, estilos propios y aislados, y nada que acordar con la página.
Angular y Vue también pueden generar web components. ¿Por qué Lit?
Pueden: Angular Elements y defineCustomElement de Vue empaquetan componentes como custom elements. Pero cada widget lleva entonces el runtime del framework consigo. Dentro de una app que ya carga el framework está bien; en la página de inicio de un restaurante pesa. Lit está hecho justo para esto.
¿Por qué no web components puros, sin librería?
Para un solo botón puede alcanzar. Lit agrega lo que si no escribiría a mano: propiedades que vuelven a renderizar cuando cambian, templates que solo actualizan lo que cambió y estilos encapsulados. Para un flujo con varios pasos y estado, esos 5 KB cuestan menos que escribir esa base usted mismo.
¿Funciona en WordPress y otros CMS?
Si puede pegar una etiqueta script y un elemento HTML, sí. Para sistemas que solo aceptan scripts clásicos, el widget de reservas también viene como un único archivo sin módulos.
¿Podemos usar el widget en nuestra propia app React o Angular?
Sí. Para React, Angular y Vue, un custom element es una etiqueta HTML más: los atributos y las propiedades entran, los eventos salen.
¿Cuánto cuesta?
El precio es a consultar: precio fijo o por tiempo y materiales para proyectos, por hora o con un retainer mensual para asesoría. Recibe una propuesta por escrito en 48 horas.