An exploration of creating Web Components

component specs:

• button with number that increases on click
• number (count) can be set from outside through attribute like this:

<my-counter count="30"></my-counter>

View counter components written in Vanilla JS, Svelte and Stencil in action!

general:

• index.html is our entry website

  • visit https://sarcevicantonio.github.io/si-web-components/

  • or you can serve this file in a locally cloned repo using npx serve or any other local server

• /native/ contains native HTMLElement-based Web Component implementation

• /svelte/ contains svelte project with svelte based implementation

• /stencil/ contains stencil project with stencil based implementation

Web Component Slides