LitElement全局消息共享与通知系统实现方案问询

Hey there! Let's break down how to build that Bootstrap Notify-style notification system in LitElement, focusing on your core requirements: a singleton message queue, targeted updates only for the notification component, and easy global access to push notifications.

1. Implement a Singleton Notification Queue with Change Notifications #

First, we'll create a singleton queue that manages notifications and broadcasts changes to subscribers. This ensures all components share the same state, and only interested components (like our notification display element) react to updates.

class NotificationQueue {
  static #instance;
  #messages = [];
  #listeners = new Set();

  constructor() {
    if (NotificationQueue.#instance) {
      return NotificationQueue.#instance;
    }
    NotificationQueue.#instance = this;
  }

  // Subscribe to queue changes (returns an unsubscribe function)
  subscribe(listener) {
    this.#listeners.add(listener);
    return () => this.#listeners.delete(listener);
  }

  // Push a new notification (supports custom options like type/timeout)
  push(message, options = { type: 'info', timeout: 3000 }) {
    const newMessage = {
      id: Date.now() + Math.random(), // Unique ID for easy removal
      content: message,
      ...options
    };
    this.#messages = [...this.#messages, newMessage];
    this.#notifyListeners();

    // Auto-remove notification after timeout (if enabled)
    if (options.timeout > 0) {
      setTimeout(() => this.remove(newMessage.id), options.timeout);
    }
  }

  // Remove a specific notification by ID
  remove(id) {
    this.#messages = this.#messages.filter(msg => msg.id !== id);
    this.#notifyListeners();
  }

  // Get a copy of current messages (prevents direct mutation)
  getMessages() {
    return [...this.#messages];
  }

  // Notify all subscribed components of queue changes
  #notifyListeners() {
    this.#listeners.forEach(listener => listener(this.getMessages()));
  }

  // Static helper for easy global access
  static push(message, options) {
    const instance = new NotificationQueue();
    instance.push(message, options);
  }
}

2. Build the NotificationElement Component #

This component will subscribe to the singleton queue, display notifications, and only update itself when the queue changes (no full app refreshes). We'll use Lit's reactive state and lifecycle hooks to handle subscription cleanup.

import { LitElement, html, css } from 'lit';

class NotificationElement extends LitElement {
  static styles = css`
    .notification-container {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .notification {
      padding: 12px 18px;
      border-radius: 4px;
      color: white;
      min-width: 250px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
      cursor: pointer;
      transition: opacity 0.3s ease;
    }
    .notification.info { background-color: #17a2b8; }
    .notification.success { background-color: #28a745; }
    .notification.warning { background-color: #ffc107; color: #212529; }
    .notification.danger { background-color: #dc3545; }
  `;

  static properties = {
    _messages: { state: true } // Reactive state to trigger local updates
  };

  #unsubscribe;

  connectedCallback() {
    super.connectedCallback();
    const queue = new NotificationQueue();
    // Subscribe to queue changes and update local reactive state
    this.#unsubscribe = queue.subscribe(messages => {
      this._messages = messages;
      // Lit automatically calls requestUpdate() when reactive properties change
    });
    // Initialize with current queue state
    this._messages = queue.getMessages();
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    // Clean up subscription to prevent memory leaks
    if (this.#unsubscribe) {
      this.#unsubscribe();
    }
  }

  render() {
    return html`
      <div class="notification-container">
        ${this._messages.map(msg => html`
          <div 
            class="notification ${msg.type}" 
            @click=${() => this.#dismissNotification(msg.id)}
          >
            ${msg.content}
          </div>
        `)}
      </div>
    `;
  }

  #dismissNotification(id) {
    const queue = new NotificationQueue();
    queue.remove(id);
  }
}

customElements.define('notification-element', NotificationElement);

3. Push Notifications from Any Component #

You can now trigger notifications from any LitElement component in your app with a single static call—no context passing required (unless you need app-specific context, which we'll cover next):

class MyFeatureComponent extends LitElement {
  render() {
    return html`
      <button @click=${() => this.#showSuccessNotification}>
        Complete Action
      </button>
    `;
  }

  #showSuccessNotification() {
    NotificationQueue.push('Action completed successfully!', {
      type: 'success',
      timeout: 4000
    });
  }
}

4. Integrate with Your Main Component Context #

If you need the notification element to access your main app's context (e.g., theme settings, user data), you can use Lit's context API to pass it through without breaking the singleton pattern:

import { createContext, provide, consume } from '@lit/context';

// Define your app context
const AppContext = createContext('app-context');

// In your main app component, provide the context
class MainApp extends LitElement {
  connectedCallback() {
    super.connectedCallback();
    provide(this, AppContext, {
      theme: 'dark',
      currentUser: 'alfredopacino'
    });
  }

  render() {
    return html`
      <notification-element></notification-element>
      <!-- Rest of your app components -->
    `;
  }
}

// Update NotificationElement to consume the context
class NotificationElement extends LitElement {
  @consume({ context: AppContext })
  appContext;

  // Use context to adjust styles/behavior
  static styles = css`
    .notification-container {
      ${this.appContext?.theme === 'dark' 
        ? css`background-color: rgba(0,0,0,0.2); padding: 10px; border-radius: 8px;` 
        : ''}
    }
    /* ... existing styles ... */
  `;
}

Why This Avoids Full App Refreshes #

• Reactive Local State: The _messages property in NotificationElement is reactive, so Lit only re-renders this component when it changes.
• Targeted Subscription: Only the notification component subscribes to queue changes—other components won't trigger updates unless they explicitly subscribe.
• Isolated Updates: Calling requestUpdate() (or relying on reactive properties) only affects the NotificationElement, not parent or sibling components.

内容的提问来源于stack exchange，提问作者alfredopacino