arno-di-loreto / learning-web-components

A repo where I store my web component experiments

Web Component Experiments

hello-word

Vanilla JS web component without linting, tests, documentation, build, ...

• https://kinsta.com/blog/web-components/
• https://web.dev/custom-elements-best-practices/

hello-world-lit

TypeScript Lit-based web component using lit ts starter kit. Many things to replace manually when changing component name. Some tools to install because package.json commands don't use npx.

• https://lit.dev/
• https://lit.dev/docs/tools/starter-kits/
• https://lit.dev/tutorials/intro-to-lit/

Installed

• rimraf: npm i rimraf

hello-world-openwc

TypeScript Lit-based web component using open-wc generator.

• https://lit.dev/docs/tools/starter-kits/#:~:text=Alternative%20starting%20point.
• https://open-wc.org/docs/development/generator/
• https://labs.thisdot.co/blog/getting-started-with-litelement-and-typescript

code-block

• https://github.com/vanillawc/wc-markdown/