LegoDOMBuild Reactive Web Components

Blocks & Naming ​

How you name your blocks depends on how you use LegoDOM:

1. Vite / Build Tools (Recommended) ​

Convention over Configuration. The filename is the tag name.

• user-card.lego → <user-card></user-card>
• app-nav.lego → <app-nav></app-nav>

You do not need b-id inside .lego files; the build system handles registration automatically.

2. CDN / Script Tags ​

Since there are no files, you must explicitly name your blocks using the b-id attribute on the <template> tag.

<!-- Only needed for CDN usage -->
<template b-id="user-profile">
  <h1>User Profile</h1>
</template>

Quick Start (CDN) ​

<!-- Define a block -->
<template b-id="counter-button" b-logic="{
  title: 'My counter',
  count: 0
}">
  <style>
    self {
      display: block;
      padding: 1rem;
    }
    button {
      font-size: 1.2rem;
      padding: 0.5rem 1rem;
    }
  </style>
  
  <h2>[[ title ]]</h2>
  <button @click="count++">
    Clicked [[ count ]] times
  </button>
</template>

<!-- Use it -->
<counter-button b-logic="{ title: 'Override b-logic title' }"></counter-button>

<script src="https://unpkg.com/lego-dom/main.js"></script>
<script>
  // Complete the initialization
  Lego.init();
</script>

That's it. No build step, no npm, no configuration.

Why LegoDOM? ​

For small projects, you get reactive blocks without the overhead of a full framework.

For large projects, you get a clear mental model and Web Standards compliance.

For learning, you can read the entire source code in an afternoon and understand exactly how it works.

Comparison ​

* Optional with Vite for .lego files

Browser Support ​

LegoDOM works in all modern browsers that support:

• Web Components
• Shadow DOM
• ES6 Proxy
• Template literals

This includes Chrome 63+, Firefox 63+, Safari 11.1+, and Edge 79+.

Community ​

• 💬 Discussions
• 🐛 Issue Tracker
• 📦 npm Package