User Profile Component

A web component for displaying user profile information with reactive properties, events, and methods.

Capabilities

Component Definition

• Creates a custom element with the tag name user-profile that can be used in HTML @test

Property Management

• Component accepts a userId property that reflects to an attribute and triggers re-render when changed @test
• Component accepts a displayMode property with values "compact" or "detailed" (defaults to "detailed") @test

State Management

• Component maintains internal loading state that is not exposed as a property @test

Event Handling

• Component emits a profileLoaded event when profile data is loaded @test
• Component listens to a custom refresh event on the host element to reload profile data @test

Public Methods

• Component exposes an async loadProfile method that can be called externally to trigger profile loading @test

Property Watching

• Component watches the userId property and automatically calls loadProfile when it changes @test

Implementation

@generates

API

/**
 * UserProfile component displays user profile information.
 *
 * Component requirements:
 * - Custom element tag name: user-profile
 * - Uses shadow DOM encapsulation
 *
 * Properties:
 * - userId (string): User ID to display, reflected to HTML attribute
 * - displayMode ('compact' | 'detailed'): Display mode, defaults to 'detailed'
 *
 * Events:
 * - profileLoaded: Custom event emitted when profile data loads, with payload {userId: string}
 *
 * Methods:
 * - loadProfile(): Promise<void> - Asynchronously loads profile data for current userId
 *
 * Behavior:
 * - Automatically reloads profile when userId property changes
 * - Responds to 'refresh' events fired on the component
 * - Maintains internal loading state (not exposed externally)
 * - Renders profile information in the specified display mode
 */
export class UserProfile {
  userId: string;
  displayMode: 'compact' | 'detailed';
  async loadProfile(): Promise<void>;
  render(): any;
}

Dependencies { .dependencies }

@stencil/core { .dependency }

Provides Web Component compiler with decorators for component development.

@satisfied-by