User Notification Component

Build a web component that displays user notifications and emits custom events when users interact with them.

Requirements

Create a Stencil component called user-notification that:

1. Accepts a notification message as a prop
2. Displays the message in the component
3. Emits a custom event when the user clicks a "Dismiss" button
4. Emits a custom event when the user clicks a "View Details" button
5. The dismiss event should bubble up the DOM tree
6. The view details event should include the notification message in the event detail

Component Behavior

The component should render:

• The notification message text
• A "Dismiss" button
• A "View Details" button

When the "Dismiss" button is clicked, emit an event that bubbles through the DOM.

When the "View Details" button is clicked, emit an event that includes the notification message as part of the event's detail payload.

Test Cases

• When dismiss button is clicked, the component emits a dismiss event that bubbles @test
• When view details button is clicked, the component emits an event with the message in event detail @test

Implementation

@generates

API

import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';

@Component({
  tag: 'user-notification',
  shadow: true,
})
export class UserNotification {
  @Prop() message: string;

  // Define events here

  render() {
    // Implementation
  }
}

Dependencies { .dependencies }

@stencil/core { .dependency }

Provides web component compilation and runtime support.

@satisfied-by