Web Components in Easy Mode https://webcomponent.io
Find a file
2025-03-30 12:29:15 +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): show shadow-dom before styling guide 2025-03-30 12:27:48 +02:00
examples feat(docs): add guide for shadow dom & constructable stylesheets 2025-03-30 12:14:56 +02:00
src feat: support constructable stylesheets 2025-03-30 12:00:45 +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: set correct netlify ID 2025-03-26 22:50:33 +01: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 4.1.0 2025-03-30 12:15:28 +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 chore: remove story on readme 2025-03-30 12:29:15 +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

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