Styleguide

Component Declaration

Use @Component with a lowercase tag matching HTML semantics. Don’t prefix the namespace – it’s configured globally.

@Component({ tag: "button" })

Class Naming

Follow the pattern HTML<Namespace><Name>Element, extend the corresponding native HTML element, and implement ComponentInterface for IntelliSense.

export class HTMLPenButtonElement
  extends HTMLButtonElement
  implements ComponentInterface

Render Method

Return a <Host>. Keep logic minimal—use destructuring for complex data, avoid inline computations.

render(): VNode {
  const { displayName } = this.user;

  return (
    <Host>
      <h1>{displayName}</h1>
      <slot />
    </Host>
  );
}

Keep It Simple

Avoid lifecycle methods and extra props unless they add real value. Each component should have one clear responsibility.