GitHub - brysonbw/lit-toaster: Notifications for Lit Web Components

npm install lit-toaster
# or
yarn add lit-toaster
# or
pnpm add lit-toaster

<body>
  <my-element></my-element>
  <app-toaster></app-toaster>
</body>

// my-element.ts
import { LitElement, css, html, type TemplateResult } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { toast } from 'lit-toaster';

@customElement('my-element')
export class MyElement extends LitElement {
  @property()
  name?: string = 'my-element';

  render(): TemplateResult {
    return html`<div>
      <p>${this.name} lit toast.</p>
      <button
        type="button"
        @click=${(): void =>
          toast.show("Here's your toast - peace and much love.")}
      >
        Create toast
      </button>
    </div>`;
  }

  static styles = css`
    :host {
      color: #1e90ff;
    }
  `;
}

declare global {
  interface HTMLElementTagNameMap {
    'my-element': MyElement;
  }
}