The Kit Review — a Blog CMS built with Next.js

draft

1 min read142 words

## Web Components in 2026

Web Components have evolved from a curiosity to a practical technology. With declarative shadow DOM, CSS parts, and improved framework interop, they solve real problems.

## When to Use Web Components

- **Design system primitives** shared across React, Vue, and Svelte teams
- **Micro-frontends** where teams use different frameworks
- **Third-party widgets** that need to work everywhere

## Building a Modern Web Component

```typescript
class SearchBox extends HTMLElement {
  static observedAttributes = ["placeholder", "value"]

connectedCallback() {
    const shadow = this.attachShadow({ mode: "open" })
    shadow.innerHTML = `
      <style>
        :host { display: block; }
        input {
          width: 100%;
          padding: 0.5rem 1rem;
          border-radius: 0.5rem;
          border: 1px solid var(--border, #e5e7eb);
        }
      </style>
      <input type="search" part="input" />
    `
  }
}
customElements.define("search-box", SearchBox)
```

The future is not "Web Components vs React" — it's Web Components AND React, each used where they excel.

Edit post

Edit post