https://cielovistasoftware.github.io/wb-starter/
By John Peters, Lead Developer at Cielo Vista Software • Updated August 2, 2026
Back in mid-2025 we shared an early milestone: five production-ready components, no build process, enterprise-grade error handling. That was Phase 1. Here's where things actually stand today.
We've kept the founding principle intact — zero build step, drop the tag in, it works — while scaling it considerably further than that first release implied.
🎯 What We've Delivered
| Metric | Achievement |
|---|---|
| Components Shipped | 70 production components across 8 categories |
| Demo Coverage | 709 live, interactive demos |
| Architecture | Zero-Build System, schema-first |
| Standards Compliance | 100% Web Standards |
| Error Handling | Enterprise-grade, actively regression-tested |
Our component suite spans cards, feedback & status, form controls, overlays & popups, layout & navigation, content & media, visual effects, and interactive utilities — from a basic <wb-card> to a full 15-band graphic equalizer audio player.
💡 The Correction Worth Making
Our original announcement described the architecture as using Shadow DOM encapsulation. That was wrong, and it's important to say so plainly: wb-starter uses Light DOM, deliberately, with no Shadow DOM boundary at all.
Every component's markup, styles, and structure stay fully inspectable and stylable from the outside — your theme CSS, your own selectors, and the browser's devtools reach straight into every component exactly the way they reach into plain HTML. That's not a limitation; it's the whole point. Composition over inheritance, real HTML semantics over invented abstractions.
🔧 Technical Excellence
What makes this system durable at 70 components instead of 5:
Light DOM, Composition-First: No Shadow DOM, no base-class inheritance chains. Components share behavior through composition — attributes in, real DOM out.
Schema-First Architecture: Every component is defined by a schema (properties, view structure, CSS API) that drives generation, validation, and documentation consistently.
Progressive Enhancement: Components gracefully degrade when JavaScript fails, keeping content accessible.
Auto-Discovery System: Components register themselves and resolve dependencies with no manual configuration.
Bulletproof Error Handling: Comprehensive fallback mechanisms and a live regression suite mean the site keeps working even when an individual component fails — and we catch it before it ships.
📊 Real-World Impact
| Category | Result |
|---|---|
| Performance | Optimal rendering across deployment environments |
| Accessibility | WCAG 2.1 AA compliance |
| Reliability | Graceful degradation in all failure scenarios, backed by an active regression suite |
| Developer Experience | Simple attribute-based configuration, no build tooling |
🎨 Why This Matters
For too long, web components have been either overly complex (Shadow DOM's styling boundary fighting your own CSS) or insufficiently robust for real use. Light DOM plus a strict, enforced standard set solves both:
For Developers: No build process, no compilation, no complex toolchains, and no fighting a shadow boundary to theme a component. Drop it into your HTML and it works — and it's stylable exactly like the rest of your page.
For Businesses: Faster development cycles, reduced maintenance overhead, and reliability for mission-critical applications.
For Users: Fast loading, real accessibility, and consistent experiences everywhere.
🚀 What's Next?
We're actively auditing the codebase against the same standards we're publishing here — including a full sweep to remove any remaining inheritance-based framing from our own documentation, so what we say and what we ship stay honest with each other.
Want to see it? Visit Cielo Vista Software or reach out to talk through how this fits your stack.
Top comments (0)