Web ComponentsLitLight DOMProgressive EnhancementNo Framework
There is a tax you pay every time you choose a JavaScript framework. React charges you a virtual DOM, a build pipeline, JSX compilation, and a 42KB runtime before your first component renders. Vue charges you a reactivity system, a template compiler, and opinions about state management. Svelte charges you a compiler and a commitment to do everything its way.
Genesis charges you nothing.
The 17 web components in this design system are built on Lit 3 — a 5KB wrapper around the Web Components standard that adds reactive properties and lifecycle management without a virtual DOM, without a build step, and without a framework runtime. They are loaded via an ES module importmap in the HTML head, resolved from a CDN, and registered as custom elements.
But here is the part that makes most framework developers uncomfortable: these components use light DOM. No Shadow DOM. No scoped styles. No slot projection. The component's children are regular DOM nodes, styled by the theme's global SCSS, inspectable in the browser's element panel, and targetable by any CSS selector.
Why would you give up Shadow DOM encapsulation? Because the Genesis ontological SCSS engine IS the styling system. Shadow DOM would create a boundary that prevents the theme engine from reaching component internals. Light DOM means genesis-entity('primary') applied in the global stylesheet works on content inside a element exactly as it works outside. There is one styling system, one source of truth, and no style boundary to debug.
The six ontological components — genesis-environment, genesis-entity, genesis-cognition, genesis-synapse, genesis-state, genesis-atmosphere — are behavioral enhancers. They read their variant attribute (e.g., ) and apply the corresponding CSS class or ARIA role. They do not render anything. They do not create shadow trees. They enhance the semantic HTML they wrap.
The domain components — genesis-header, genesis-footer, genesis-navbar, genesis-navigation, genesis-form, genesis-dashboard, genesis-search, genesis-accordion, genesis-card — add interactive behavior: scroll detection for sticky headers, off-canvas drawer management for navigation, keyboard accessibility for accordions, form validation with ARIA live regions. All of them extend a shared GenesisElement base class that handles property declaration, update lifecycle, and connection callbacks.
The progressive enhancement pattern means every page works without JavaScript. The HTML is semantic. The SCSS ontology styles it. The web components, when they load, add interactivity on top. Disable JavaScript and the header still displays, the cards still render, the forms still submit. Enable JavaScript and the header detects scroll position, the accordion opens and closes, the navigation handles keyboard events.
This is the opposite of a framework-first architecture, where the JavaScript IS the page and the HTML is an empty div waiting to be hydrated. In Genesis, the HTML is the page. The SCSS is the design system. The web components are a progressive enhancement layer that adds behavior without replacing structure.
No build step. No virtual DOM. No framework tax. Just custom elements that enhance semantic HTML with the behavior it was always meant to have.
## The 5KB Alternative
## Light DOM: The Controversial Choice
## The Ontological Six
## Progressive Enhancement, Not Progressive Replacement
## The Components
The 17 genesis web components fall into three tiers:
**Ontological** (behavioral enhancers for the six categories):
- `` — Spatial organization and layout. Owns grid, flex, gap, and max-width properti...
- `` — Visual presence and material properties. Owns padding, border, border-radius,...
- `` — Typography and information intent. Owns font-size, font-weight, font-family, ...
- `` — Interaction and navigation patterns. Owns hover, focus, cursor, and transitio...
- `` — Temporal conditions and lifecycle. Owns animation, transition, opacity, and f...
- `` — Sensory texture and emotional tone. Owns background, color, box-shadow, and a...
**Domain** (interactive behavior for specific page elements):
- `` — Scroll detection, sticky behavior, theme toggle
- `` — Off-canvas drawer, keyboard navigation
- `` — Expand/collapse with ARIA support
- `` — Validation, ARIA live regions
- `` — Layout management, widget lifecycle
- `` — Real-time filtering, result highlighting
## Further Reading
- [The Death of Utility Classes](/samples/content-driven/article.html) — the three-tier architecture that web components enhance
- [Accessibility Is Not a Feature](/samples/content-driven/accessibility.html) — how components enforce WCAG compliance
- View the [component showcase](/enhanced-showcase/) for interactive demonstrations
