DEV Community

0 seconds of 5 minutes, 17 secondsVolume 90%
Press shift question mark to access a list of keyboard shortcuts
00:00
00:00
05:17
 
Fabio Biondi
Fabio Biondi

Posted on

4 1

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:

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay