web-components-conventions

What problem does it solve?

Web components often suffer from inconsistent conventions across projects, making maintenance and collaboration harder.

Core Features & Use Cases

• Use nosto- prefix for custom element tags to avoid conflicts
• Register classes via the customElement decorator for reliable registration
• Define attributes via the @property(...) decorator; attribute names derive from property names and map to kebab-case
• Prefer connectedCallback and disconnectedCallback lifecycle methods
• Use private instance methods (#) for element instance logic
• Use module-level functions for pure logic
• Include HTMLElementTagNameMap declaration for TypeScript JSX support

Quick Start

Apply these conventions to all files under src/components to ensure consistency.