This document discusses how to create reusable web components using the Lit framework from Google. It provides steps for writing a web component using Lit, publishing the component to NPM, and then using the custom component in different frameworks like vanilla JavaScript, Angular, and React. Key features of the example "my-panel" component are described, including making it toggleable via a click event on the title bar.

1. Create Web Components
using (by Google)
fabiobiondi.dev
and use them everywhere

2. Write web components
by using Lit
What is (Google) Lit?
A framework to easily create web components
fabiobiondi.dev
use everywhere
Publish on npm

3. fabiobiondi.dev
Goal: create my-panel component
!
Panel 1
lorem ipsum…
⭐
Panel 2
Custom Title
Custom content
<slot>
Custom Icon
+
“icon-click” event
It must be Toggable:
when the titleBar is clicked
the content should disappear
with following features

4. How to use my-panel
fabiobiondi.dev
The result
♥
My Widget
lorem ipsum…
Use in any
HTML template

5. Create a Lit Project with ViteJS
Now you can open your Lit project on localhost:3000
fabiobiondi.dev

6. Directive
Render
Children
Emit
Custom Event
My Panel: Source Code
Component
properties

7. Publish on
Package
Name
Build &
Publish

8. Use the component everywhere
Vanilla JS
Angular
React / TS
TIP:
You can also use
ViteJS to create:
Vue, React, Preact, Lit,
Svelte & Vanilla JS/TS
projects
Install Lit and your component (from npm)

9. How to use in VanillaJS
import your
component
use the
component
fabiobiondi.dev
listen
custom event

10. fabiobiondi.dev
How to use in Angular
import your
component
use the
component
enable non-angular elements
to be used in your project

11. How to use in React
import & use WC
in any React
project
fabiobiondi.dev
Wrap your
web component
to be used in React
install React
as dependency
in your LIT project

12. fabiobiondi.dev
Follow me on: