DEV Community

Play Button Pause Button
Fabio Biondi
Fabio Biondi

Posted on

Create Web Components by using Google Lit, publish them on Npm and use them in React, Angular & JS projects

Web components are a set of technologies that allow us to create reusable HTML elements, in which all features are encapsulated within their code.

The advantage of using web components is that they can be used anywhere: in HTML/VanillaJS, Vue, #react, #angular project and in any other modern JS framework and library

WRITE ONCE, USE EVERYWHERE, ANYTIME ... for real 😅

However, Native APIs for creating #webcomponents are not very pleasant to use. The DX is horrible 🤮

Frameworks like "Google #lit" greatly simplify their creation and in these slides I'll describe:
➡️ how to create web components using Lit
➡️ publish a web component on npm
➡️ use the web component in vanilla JS, Angular and React

CHAPTERS:
00:00 What are WC?
00:50 MyPanel Component
01:56 Create Lit Projects
02:10 Source Code
03:07 Publish on npm
03:21 How to use
03:52 Use in Vanilla JS
04:10 Use in Angular
04:42 Use in React

DOWNLOAD PDF SLIDE


🔗 Follow me on:

Top comments (0)