Web Components in Easy Mode https://webcomponent.io
Find a file
2025-03-30 21:07:14 +02:00
.husky chore: add build step in precommit 2025-03-23 11:55:02 +01:00
.vscode chore: format code 2024-12-19 22:43:12 +01:00
assets chore: add todo-app example on readme 2023-12-27 22:11:59 +01:00
docs feat(docs): marketing stuff 2025-03-30 21:07:14 +02:00
examples feat(docs): add guide for shadow dom & constructable stylesheets 2025-03-30 12:14:56 +02:00
src feat: show error when has styles & not using shadow roots 2025-03-30 12:46:43 +02:00
test test: organize test files 2025-03-22 10:14:35 +01:00
vendors/htm chore: publish dist from root dir (#32) 2023-12-18 23:12:18 +01:00
.build.yml chore: remove unnecessary installation of docs deps before build 2025-03-30 20:08:27 +02:00
.gitignore test: set up vitest & add tests 2025-03-22 10:11:48 +01:00
.npmignore chore: publish dist from root dir (#32) 2023-12-18 23:12:18 +01:00
.prettierignore chore: set up prettier ignore 2024-12-27 11:10:32 +01:00
eslint.config.mjs chore: ignore dist/* on eslint config 2025-03-22 11:38:24 +01:00
LICENSE chore: add LICENSE file 2023-11-10 21:56:12 +01:00
netlify.toml feat: replace mcfly site with starlight docs 2025-03-26 21:10:27 +01:00
package.json feat: show error when has styles & not using shadow roots 2025-03-30 12:46:43 +02:00
pnpm-lock.yaml chore: remove mcfly deps 2025-03-26 22:10:31 +01:00
pnpm-workspace.yaml feat: replace mcfly site with starlight docs 2025-03-26 21:10:27 +01:00
prettier.config.mjs chore: use .mjs config files 2024-12-19 23:16:57 +01:00
README.md feat(docs): add discord social; update icons 2025-03-30 20:18:39 +02:00
tsconfig.json chore: set tsc target to ES2022 2025-03-22 11:38:03 +01:00
vitest.config.mjs test: set up vitest & add tests 2025-03-22 10:11:48 +01:00

Note

The project is now in SourceHut. Please submit issues or requests via our Todo Page or via email.

Web Component Base

Package information: NPM version Package information: NPM license Package information: NPM downloads Bundle Size

🤷‍♂️ zero-dependency, 🤏 tiny JS base class for creating reactive custom elements easily

counter example code snippet

When you extend the WebComponent class for your component, you only have to define the template and properties. Any change in any property value will automatically cause just the component UI to render.

The result is a reactive UI on property changes.

There's a trade off between productivity & lightweight-ness here, and it is somewhere between Microsoft's FASTElement & Google's LitElement.

Want to get in touch?

There are many ways to get in touch:

  1. Email a ticket: ~ayoayco/wcb@todo.sr.ht
  2. Submit via SourceHut todo
  3. Start a GitHub discussion
  4. Email me: ayo@ayco.io
  5. Join via Discord: Ayo's Projects

Inspirations and thanks

  1. htm - I use it for the html function for tagged templates, and take a lot of inspiration in building the rendering implementation. It is highly likely that I will go for what Preact is doing... but we'll see.
  2. fast - When I found that Microsoft has their own base class (super cool!) and I thought: okay, I don't feel bad about forgetting Lit exists now
  3. lit - lit-html continues to amaze me and I worked to make wcb generic so I (and others) can continue to use it