Web Components in Easy Mode
https://webcomponent.io
.husky | ||
.vscode | ||
assets | ||
docs | ||
examples | ||
src | ||
test | ||
vendors/htm | ||
.build.yml | ||
.gitignore | ||
.npmignore | ||
.prettierignore | ||
eslint.config.mjs | ||
LICENSE | ||
netlify.toml | ||
package.json | ||
pnpm-lock.yaml | ||
pnpm-workspace.yaml | ||
prettier.config.mjs | ||
README.md | ||
tsconfig.json | ||
vitest.config.mjs |
Note
The project is now in SourceHut. Please submit issues or requests via our Todo Page or via email.
Web Component Base
🤷♂️ zero-dependency, 🤏 tiny JS base class for creating reactive custom elements easily ✨
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.
Links
- Documentation
- Main Repo at SourceHut
- GitHub Mirror
- ...more mirrors coming
- To Do
- Read a blog explaining the reactivity
- View demo on CodePen
Want to get in touch?
There are many ways to get in touch:
- Email a ticket: ~ayoayco/wcb@todo.sr.ht
- Submit via SourceHut todo
- Start a GitHub discussion
- Email me: ayo@ayco.io
- Join via Discord: Ayo's Projects
Inspirations and thanks
- 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. - 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
- lit -
lit-html
continues to amaze me and I worked to makewcb
generic so I (and others) can continue to use it