Note
HTML boolean attributes semantics shipped in v6 - A boolean
prop follows the HTML convention in both directions: presence means true,
absence means false. true reflects as a bare attribute and false
removes it, so toggleAttribute() and [attr] CSS selectors finally work as
expected.
Any present value is true — including the literal flag="false", just
like native disabled="false" is still disabled. If you write boolean
attributes as setAttribute(name, String(bool)), that now always means
true; switch those call sites to toggleAttribute(name, bool). wcb warns
in the console when it sees a boolean attribute written as "true"/"false"
so the change cannot fail silently. Attributes whose "false" is meaningful
(aria-*, contenteditable) should be declared as string props.
See Prop Access for details.
🤷♂️ 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.
Next actions:
- Read the docs
- View demos with code examples
- Play with a demo on CodePen.
- Try it on TypeScript playground
There are many ways to get in touch:
- Open a GitHub issue or discussion
- Submit a ticket via SourceHut todo
- Email me: hi@ayo.run
- Sara Rainsberger - I never stop singing praises to the Astro documentation team and I use Sarah's "50 docs tips in 50 days" as a guide in reviewing the documentation for wcb. I do not have a team myself, and do not have the level of excellence Sarah brings to reviewing docs. I often need the assistance and have encodified a docs-review skill for it with permission.
- 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 I thought it was super cool!
- lit -
lit-htmlcontinues to amaze me and I worked to makewcbgeneric so I (and others) can continue to use it
See size-change-log.md for a running record of how each correctness/feature change affects the WebComponent base class bundle size, with the reason and benefit of each.
This is the base class used for web components in Ayo's projects, primarily cozy-games, mcfly, his personal site, his blog, and others.
Just keep building.
A project by Ayo