web-components-conventions

Standard web component conventions require using a customElement decorator for class registration and a @property decorator for attributes. Attribute names map to kebab-case, while developers prefer connectedCallback and disconnectedCallback for lifecycle management.

To enforce consistent custom element naming and avoid conflicts, apply a nosto- prefix to all custom element tags. This standardizes tag registration across frontend projects, ensuring elements remain uniquely identified and preventing DOM naming collisions.

To get TypeScript JSX support for custom elements, declare your tags in the HTMLElementTagNameMap. This allows the TypeScript compiler to recognize custom elements in JSX syntax, providing type checking and autocompletion for your web components.

When structuring custom element logic, use private instance methods (#) for element-specific behavior and module-level functions for pure logic. This separates stateful component interactions from reusable computations, keeping web component architecture clean and maintainable.

No, this web component convention guide does not require specific frontend libraries. It applies to frontend projects implementing custom elements natively, relying only on TypeScript decorators and standard HTMLElement lifecycle methods without external dependencies.