Introducing the @knighted/jsx + @knighted/css Stack: Standards-Based Flexibility for Modern Web Development

In the rapidly evolving landscape of web development, 2026 presents a clear divide: tools that abstract away native browser behavior and tools that accelerate it. The @knighted stack — comprising @knighted/jsx and @knighted/css — sits firmly in the latter category, providing the developer experience (DX) of a modern framework while operating entirely on native web standards and Rust-powered infrastructure.

Demo App: Experience the @knighted stack in action by visiting the live demo at morganney/css-jsx-app!

At the heart of @knighted lies a transformative philosophy: accelerate native web standards without layering on heavy abstractions. Central to this vision is its Shadow DOM-powered integration, which guarantees true style encapsulation and predictable component behaviors. Combined with Rust-speed tooling, full TypeScript safety, and universal runtime compatibility, @knighted offers a modern web development toolchain that’s both lightweight and powerful.

---

The Shadow DOM Difference: Fully Encapsulated Components

One of the core innovations of @knighted/jsx + @knighted/css is its first-class support for Shadow DOM. By leveraging this browser-native feature, @knighted provides true isolation for styles, ensuring that:

• CSS Conflicts are Eliminated: Scoped Shadow DOM styles guarantee that components are fully sealed from external selectors or accidental style leakage.
• Global CSS Pollution is Prevented: Unlike traditional CSS or heavy CSS-in-JS solutions, every @knighted component is wrapped in an encapsulated style boundary.
• Performance Benefits are Maximized: Shadow DOM enables parallel DOM rendering and style application, leveraging browser optimizations for speed.

This ensures that every component you build with @knighted is predictably styled, portable, and reusable, without requiring additional runtime libraries or hacks.

---

Why @knighted is a Game-Changer in 2026

1. The "Native" Philosophy: Standards-First

Unlike other Rust-based frameworks (e.g., Leptos, Dioxus) that replace web standards with Rust macros and WASM abstractions, @knighted embraces the existing browser-native model:

• Standards as Authoring: Write valid JavaScript, CSS, and DOM-based code. If you know MDN documentation, you’re already up to speed.
• Shadow DOM as Default: Components automatically use encapsulated styling and structure, aligning with the modern evolution of web component standards.
• Future-Proof: Features like Constructable Stylesheets and Shadow DOM align with browser capabilities, ensuring compatibility with future browser optimizations.
• Lightweight by Design: There’s no heavy runtime abstraction or proprietary syntax—just modern tools that accelerate the standards you already use.

2. Rust-Powered, Not Rust-Required

The @knighted stack uses the Oxc toolchain (Oxidation Compiler) to handle the "heavy lifting" of build time:

• Instant Builds: Rust-powered parsing, scoping, and transpilation result in near-instant builds and minified file outputs.
• Bridge Architecture: Rust handles performance-critical tasks at build time (e.g., CSS scoping, selector mapping) and hands off clean, optimized JavaScript for runtime. No need to manage a WASM memory heap or recompile binaries.

3. Type Safety as a Core Feature

At its heart, @knighted integrates deeply with TypeScript to create a closed loop system for static analysis and safety:

• Virtual JSX Mapping: With the TypeScript Language Service Plugin, tagged templates like jsx and reactJsx are seen by the compiler as real JSX, enabling in-template autocompletion, red-line errors, and refactoring.
• Shadow DOM-Driven Selectors: Type-safe CSS selectors derived directly from scoped Shadow DOM styles ensure no broken class references make it to runtime.

This combination of tools delivers unmatched confidence, productivity, and type safety while keeping workflows simple.

4. Universal Interoperability

The @knighted stack is not a proprietary silo—it’s a highly interoperable ecosystem that integrates seamlessly with existing technologies:

• Switchable Runtimes: Use jsx for lightweight DOM manipulation and performance-critical Web Components or reactJsx for React-based legacy systems.
• SSR via Shims: The @knighted/jsx/node environment enables native DOM code to function out-of-the-box on the server using high-performance shims (e.g., linkedom, jsdom). No specialized rendering engines are needed.

5. Multi-Dialect CSS, Stable Selectors, and Why It Matters

@knighted doesn't lock you into one styling paradigm—it works with CSS Modules, Sass Less, and Vanilla Extract, surfacing both hashed and stable classes when needed. This means:

• One loader for all your web styling: Move between paradigms as your project grows or legacy code is absorbed.
• Predictable, type-safe selectors: Get complete autocompletion and error checking inside your .js or .ts/.tsx code.
• Encapsulation AND flexibility: Styles work in global, shadow DOM, or any context without rewrite.

---

Core Features Reimagined

Authoring on Standards

Tag-based components and styles leverage browser-native syntax:

import { jsx } from '@knighted/jsx/index.js'
import styles from './theme.knighted-css.js'

jsx`
  <section class="${styles.section}">
    <h1>Encapsulated, Predictable Styles</h1>
    <button class="${styles.button}" onClick=${() => console.log('tapped')}>
      tap me
    </button>
  </section>
`

• Tagged Template Literals: Simple, readable, and interoperable with both DOM and React runtimes.
• Scoped Shadow DOM Styles: Achieve isolation and reusability without additional tooling.

Runtime on Standards

Ultra-thin runtime layers map directly to browser APIs:

• Native DOM Objects: Outputs real Nodes, DocumentFragment, and SVGElement, avoiding unnecessary abstraction layers.
• True Shadow DOM Styling: Ensures every component maintains its encapsulated state, eliminating global style conflicts and improving overall application reliability.

Full TypeScript Integration

Development is made safer and faster via intelligent tooling:

• In-Template Type Checking: Catch errors in template literals at compile time.
• IDE Intelligence: Enjoy refactoring, autocomplete, and go-to-definition support inside templates.

CSS Selector Type Generation

Solve the "mystery meat" problem of CSS-in-JS with automatically typed styles:

import styles from './theme.knighted-css.js';

<button className={styles.button}>Predictable and Scoped Button</button>;

Key benefits:

• Shadow DOM selectors stay type-safe: Predictive autocompletion of Shadow DOM class names.
• Encapsulate styles: Avoid global style bleeding between React and other app parts using Shadow DOM isolation.
• Maximize component reusability: Use React components both globally and in shadow DOM contexts.
• Simplify build tooling: Bypass .tsx quirks, TypeScript decorators, and complex loader setups.

Shadow DOM Embed

Define a component with jsx and export its scoped styles, then consume both via a combined query import:

// components/native_button.js
import { jsx } from '@knighted/jsx/index.js'
import styles from './native_button.knighted-css.js'

export default function Button({ label, onClick }) {
  return jsx`
    <button class="${styles.button}" onClick=${onClick}>
      <span class="${styles.token}">native css</span>
      <span class="${styles.label}">${label}</span>
    </button>
  `
}

import Button, {
  knightedCss as buttonCss,
} from './components/native_button.js?knighted-css&combined'

const host = document.createElement('div')
const shadow = host.attachShadow({ mode: 'open' })
const sheet = new CSSStyleSheet()

sheet.replaceSync(buttonCss)
shadow.adoptedStyleSheets = [sheet]

const handleClick = () => console.log('shadow button tapped')

shadow.append(Button({ label: 'Shadow-scoped button', onClick: handleClick }))
document.body.append(host)

One import gives you both the DOM factory (Button) and the Shadow DOM-ready stylesheet string (knightedCss), so scoped styling stays with the component wherever you mount it.

---

Build Configuration (Rspack/Webpack)

A minimal module rule setup that wires both loaders together:

export default {
  module: {
    rules: [
      {
        test: /\.[mc]?jsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: '@knighted/jsx/loader',
            options: {
              runtime: 'dom', // switch to 'react' when emitting reactJsx templates
              // Docs: https://github.com/knightedcodemonkey/jsx/blob/main/src/loader/README.md
            },
          },
        ],
      },
      {
        resourceQuery: /\?knighted-css(?:&.*)?$/,
        use: [
          {
            loader: '@knighted/css/loader',
            options: {
              moduleGraph: {
                extensions: ['.ts', '.tsx'], // optional: add custom script extensions
              },
              // Docs: https://github.com/knightedcodemonkey/css/blob/main/docs/loader.md
            },
          },
        ],
      },
    ],
  },
}

This keeps JSX transpilation and Shadow-DOM-safe styling in a single place while remaining easy to expand with additional loaders later.

Architectural Summary: Shadow DOM vs Traditional Approaches

The @knighted stack takes a radical but simple approach to modern web development by combining Shadow DOM styling, native tooling, and Rust-powered speed. Below is how it stands apart from traditional frameworks:

Feature	@knighted Approach	Traditional Approach
Logic	Native Tagged Templates	Proprietary VDOM / Rust Macros
Styles	Scoped Shadow DOM	Global CSS / CSS-in-JS
Tooling	Oxc / Rust (Ultra-fast)	Babel / SWC (General-purpose)
Type Safety	Plugin-driven Virtual JSX	Standard TypeScript Compilation
Runtime	Thin DOM/SVG Reconciler	Heavy Framework Core

---

A Toolchain for React-Tier DX with Vanilla-Tier Performance

The @knighted/jsx + @knighted/css stack is the premier choice for developers who want modern web development productivity without compromising on speed or compatibility. It is the "Goldilocks zone" for the web—a high-performance accelerator that resists both proprietary silos and unmanaged manual workflows.

In 2026, the @knighted stack empowers developers to:

• Build with true Shadow DOM encapsulation for predictable, isolated styling.
• Ship lightweight, standards-compliant applications with ultra-fast build times.
• Deliver type-safe, scoped styles for fully portable and reusable CSS.
• Transition seamlessly between DOM-first and React-centric workflows.

Ready to adopt the future of web development?

Get Started

• Scaffold a new project:

  npx @knighted/jsx init

• See the @knighted/css loader docs
• Explore the demo app for more examples

---

References

• @knighted/jsx documentation
• @knighted/css documentation
• See the complete working example Demo App.