Web Components Architecture

Core Principles

This skill enforces a strict architectural pattern for web components:

1. Zero DOM Selection: NEVER use querySelector, querySelectorAll, or getElementById
2. Attribute-Driven State: All state flows through HTML attributes
3. Event Delegation on this: Use this.addEventListener and the handleEvent pattern
4. No External Dependencies: Use only standard Web Platform APIs
5. Declarative Shadow DOM: Use <template shadowrootmode="open"> for instant rendering
6. Progressive Enhancement: Components work (degraded) even if JavaScript fails
7. Customized Built-ins Over Autonomous: Extend native elements when possible to preserve accessibility

Relationship with JavaScript Best Practices

This skill defines the architectural pattern for building web components. When implementing components, combine this skill with javascript-pragmatic-rules for production-quality code:

This skill provides the WHAT (component architecture):