Drow.js: A Practical Look at the Tiny Web Components Library

# Drow.js: A Practical Look at the Tiny Web Components Library If you've built a Web Component before, you've probably written something like this: ```javascript class MyComp extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); } connectedCallback() { // boilerplate setup } // lifecycle methods } customElements.define('my-comp', MyComp); ``` It works, but there's a lot of ceremony for something relatively simple. **Drow.js** strips away that ceremony. Instead of class inheritance and lifecycle methods, you define your components as plain JavaScript objects. The library handles the rest. And it's *tiny*—under 1kb gzipped with zero dependencies. ## What Is Drow.js? Drow is a minimalist wrapper around the Web Components API. It takes the standard Custom Elements spec and makes it feel less like writing framework code and more like configuring objects. The core idea: **Components are objects, not classes.** ## The Object-Based Approach Here's how you define a Drow component: ```javascript var myComp = { "name": "my-comp", "props": ['title', 'link'], "template": `<div> <div>Title: {{title}}</div> <div>Link: {{link}}</div> </div>` } Drow.register(myComp); ``` Then use it in HTML like any Web Component: ```html <my-comp title="Great Name" link="https://something.com"></my-comp> ``` Notice a few things: - **name**: Must be dash-separated (Web Components requirement) - **props**: Array of attribute names that can be set on the element - **template**: HTML with handlebars-style {{variable}} placeholders That's the bare minimum. Let's look at what else you can add. ## Building a Real Component Here's an example component from the documentation with some practical features: ```javascript var config = { "name": "my-comp", "props": ['prop1', 'prop2'], "css": "b { color: blue; }", "template": `<div> <div>Every time you click the timestamp updates.</div> <b>Click for the timestamp</b> <div>{{prop1}}</div> </div>`, "init": function(config) { let prop1 = this.getAttribute('prop1') || ""; const comp = this.getComp(); comp.addEventListener('click', e => { comp.querySelector("b").innerHTML = new Date(); }); }, "watch": function(attribute) { if (attribute.name == 'prop1') { attribute.comp.querySelector('b').innerHTML = `Hello, ${attribute.newValue}`; } } } Drow.register(config); ``` Now we've added three new features: ### 1. **CSS Scoping** The `css` field contains component-scoped styles. They won't leak out and external styles won't leak in. Shadow DOM encapsulation handled automatically. ### 2. **The init Hook** The `init` function runs when the component is created. It gets access to the component via `this.getComp()` and can: - Set up event listeners - Query the template - Read initial prop values with `this.getAttribute()` This is where you add interactivity without the lifecycle method overhead. ### 3. **The watch Hook** The `watch` function triggers whenever an attribute changes. It receives an object with: - `name`: The attribute that changed - `newValue`: The new value - `comp`: A reference to the component This is how you react to updates from outside the component—essentially a property observer. ## A Practical Example: Timestamp Component Let's build something concrete. A component that displays when it was last clicked: ```javascript var timestampComp = { "name": "last-click", "props": ['label'], "css": ` .container { padding: 16px; border: 1px solid #ddd; border-radius: 4px; background: #f5f5f5; } .timestamp { font-weight: bold; color: #0066cc; cursor: pointer; padding: 8px; user-select: none; } .timestamp:hover { background: #e8e8e8; border-radius: 2px; } `, "template": ` <div class="container"> <p>{{label}}</p> <div class="timestamp">Click here for current time</div> <p id="output"></p> </div> `, "init": function(config) { const comp = this.getComp(); const timestamp = comp.querySelector('.timestamp'); const output = comp.querySelector('#output'); timestamp.addEventListener('click', () => { output.textContent = new Date().toLocaleString(); }); } } Drow.register(timestampComp); ``` Use it: ```html <last-click label="Last clicked at:"></last-click> ``` That's it. No build step, no complicated setup. Just define, register, and use. ## How the Templating Works Drow uses simple mustache/handlebars style variable replacement. Anything in `{{}}` gets replaced with the prop value: ```javascript "template": ` <h1>{{title}}</h1> <p>{{description}}</p> ` ``` The variables are applied by prop name from your attributes: ```html <my-card title="Hello World" description="A simple component"> </my-card> ``` No special syntax, no directives, no magical binding. Just string interpolation based on props. ## Reacting to Changes with watch The `watch` hook is useful for when attributes get updated dynamically: ```javascript var greeting = { "name": "greeting", "props": ['name'], "template": `<h1>Hello, <span class="user"></span></h1>`, "watch": function(attribute) { if (attribute.name == 'name') { attribute.comp.querySelector('.user').textContent = attribute.newValue; } } } Drow.register(greeting); ``` Now if you change the name: ```javascript const card = document.querySelector('greeting'); card.setAttribute('name', 'Alice'); // The component updates automatically ``` ## Communication Between Components For parent-to-child, use props and attributes. For child-to-parent, use custom events (standard Web Component pattern): ```javascript var buttonComp = { "name": "my-button", "props": ['text'], "template": `<button>{{text}}</button>`, "init": function(config) { const comp = this.getComp(); const btn = comp.querySelector('button'); btn.addEventListener('click', () => { comp.dispatchEvent(new CustomEvent('button-clicked', { detail: { timestamp: Date.now() } })); }); } } Drow.register(buttonComp); ``` Listen for it in your HTML: ```html <my-button text="Click me"></my-button> <script> document.querySelector('my-button').addEventListener('button-clicked', (e) => { console.log('Button clicked at:', e.detail.timestamp); }); </script> ``` ## Setup and Installation ### Via Script Tag Include the file directly in your HTML: ```html <script src="drow.js"></script> <my-comp prop="value"></my-comp> <script> var myComp = { "name": "my-comp", "props": ['prop'], "template": `<div>{{prop}}</div>` }; Drow.register(myComp); </script> ``` ### Via NPM ```bash npm install drow ``` Then import it: ```javascript import Drow from 'drow'; const myComp = { "name": "my-comp", "props": ['prop'], "template": `<div>{{prop}}</div>` }; Drow.register(myComp); ``` ## When Should You Use Drow? **Good fit:** - You want Web Components without the boilerplate - Building UI components for your site - Small to medium projects - You want a library that's easy to understand and modify - Bundle size matters - Prototyping and learning **Consider alternatives:** - You need complex state management (React/Vue/Svelte are better here) - Very large enterprise applications with extensive component ecosystems - You need advanced templating or reactivity features ## Comparison with Lit Both are lightweight Web Component libraries, but they approach it differently: | Feature | Drow | Lit | |---------|------|-----| | Bundle Size | <1kb | ~5kb | | Learning Curve | Minimal | Low-Medium | | Dependencies | None | None | | Syntax | Objects | Classes + Decorators | | Templating | Handlebars | Tagged template literals | | Reactivity | Manual | Built-in | Drow keeps things simple. Lit adds more power at the cost of a bit more complexity. Pick based on your project needs. ## Recent Updates The library recently converted its internal naming from `DrowJS` to `Drow`, making the API cleaner and more consistent. The core functionality remains the same—object-based component definitions with minimal overhead. ## Getting the Code Everything is on GitHub: <https://github.com/johnfacey/drowjs> There's a `/docs` folder with more detailed documentation, and you can see examples in `index.html` and `samples.js`. To run locally: ```bash npm install npm run server ``` ## The Bottom Line Drow.js won't replace React or Vue for complex applications. But if you want to use the browser's native component system without fighting the API, it's a really pleasant experience. The value of Drow is in its **simplicity**. You get Web Component encapsulation, scoped CSS, prop-based templating, and lifecycle hooks—all in a tiny package with almost no learning curve. If that sounds useful for your project, give it a try. The barrier to entry is basically zero. --- **Learn more:** Check out [@johnfacey](https://x.com/johnfacey) on Twitter, [@johnfacey](https://bsky.app/profile/johnfacey.bsky.social) on BlueSky or visit the [GitHub repository](https://github.com/johnfacey/drowjs).