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
Inspirations and thanks
- htm - I use it for the
htmlfunction 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-htmlcontinues to amaze me and I worked to makewcbgeneric so I (and others) can continue to use it
