What are the benefits of Declarative Shadow DOM (DSD)?

DSD allows the Shadow DOM to be defined directly in HTML markup, enabling components to render their internal structure instantly upon page load, even before JavaScript has finished downloading or executing.

Why is the use of querySelector forbidden in this architecture?

By avoiding manual DOM selection and using attribute-driven state, components become more predictable, easier to test, and follow a strict data-flow pattern similar to modern reactive frameworks but without the library overhead.

Does this skill require external libraries like Lit or Stencil?

No, this skill enforces a pure Web Platform API approach with zero external dependencies, ensuring your components are future-proof and lightweight.

How does this skill handle component accessibility?

It prioritizes the use of customized built-in elements—extending native tags like or —to ensure that all standard keyboard behaviors and screen reader features remain intact.

Web Components Architecture

Name: Web Components Architecture
Author: matthewharwood

bymatthewharwood

•

设计工具

Builds high-performance, dependency-free web components using native Web Platform APIs and Declarative Shadow DOM.

This skill provides a strict architectural framework for building modern web components using the Custom Elements v1 API. It enforces a "zero DOM selection" policy, relying instead on attribute-driven state management and the handleEvent pattern for superior performance and maintainability. By leveraging Declarative Shadow DOM and progressive enhancement, it ensures components are accessible, lightweight, and render instantly without the overhead of external libraries or frameworks. This approach is ideal for creating long-lived design systems and performance-critical frontend interfaces.

主要功能

01Ensures zero-dependency implementations using pure, standards-compliant Web Platform APIs

022 GitHub stars

03Implements strict 'Zero DOM Selection' using attribute-driven state management

04Applies the handleEvent pattern for efficient memory management and clean event delegation

05Prioritizes customized built-in elements to preserve native HTML accessibility

06Uses Declarative Shadow DOM for instant, SEO-friendly rendering without JavaScript

使用场景

01Building a framework-agnostic design system that works across any web environment

02Refactoring legacy frontend code into modern, maintainable, and dependency-free web standards

03Creating lightweight, accessible UI components for projects prioritizing progressive enhancement

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add matthewharwood/engmanager.xyz web-components-architecture

For use in Claude.ai and ChatGPT

Download Skill