Web Components and Design Patterns

Web Components are a set of technologies that allow developers to create reusable, well-encapsulated custom HTML elements. Design patterns provide reusable solutions to common problems. Combining the two can help build more robust and maintainable front-end applications.

Core Concepts of Web Components

Web Components consist of three main technologies:

1. Custom Elements: Allow developers to define their own HTML tags
2. Shadow DOM: Provides the ability to encapsulate styles and markup
3. HTML Templates: Define reusable markup structures

// Custom element example
class MyButton extends HTMLElement {
  constructor() {
    super();
    // Create Shadow DOM
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        button {
          padding: 8px 16px;
          background: #4CAF50;
          color: white;
          border: none;
          border-radius: 4px;
        }
      </style>
      <button><slot></slot></button>
    `;
  }
}

// Register the custom element
customElements.define('my-button', MyButton);

Factory Pattern in Web Components

The factory pattern is suitable for creating complex Web Components, encapsulating instantiation logic:

class ComponentFactory {
  static create(type, options) {
    switch(type) {
      case 'dialog':
        return new DialogComponent(options);
      case 'tooltip':
        return new TooltipComponent(options);
      default:
        throw new Error(`Unknown component type: ${type}`);
    }
  }
}

class DialogComponent extends HTMLElement {
  constructor(options) {
    super();
    this.options = options;
    // Initialize dialog
  }
}

// Use the factory to create a component
const dialog = ComponentFactory.create('dialog', {
  title: 'Prompt',
  content: 'Operation successful'
});

Observer Pattern for Component Communication

Communication between Web Components can be achieved using the observer pattern:

// Simple event bus implementation
class EventBus {
  constructor() {
    this.listeners = {};
  }

  on(event, callback) {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event].push(callback);
  }

  emit(event, data) {
    (this.listeners[event] || []).forEach(callback => callback(data));
  }
}

// Usage in components
class PublisherComponent extends HTMLElement {
  constructor() {
    super();
    this.eventBus = new EventBus();
    this.addEventListener('click', () => {
      this.eventBus.emit('button-clicked', { time: Date.now() });
    });
  }
}

class SubscriberComponent extends HTMLElement {
  connectedCallback() {
    this.eventBus.on('button-clicked', (data) => {
      console.log('Button clicked:', data);
    });
  }
}

Decorator Pattern to Enhance Component Functionality

The decorator pattern can extend functionality without modifying the original component code:

function withLogging(WrappedComponent) {
  return class extends WrappedComponent {
    connectedCallback() {
      console.log(`Component ${this.tagName} mounted`);
      super.connectedCallback && super.connectedCallback();
    }

    disconnectedCallback() {
      console.log(`Component ${this.tagName} unmounted`);
      super.disconnectedCallback && super.disconnectedCallback();
    }
  };
}

// Original component
class BasicComponent extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<p>Basic component</p>';
  }
}

// Enhanced component
const EnhancedComponent = withLogging(BasicComponent);
customElements.define('enhanced-component', EnhancedComponent);

Strategy Pattern for Handling Component Variants

The strategy pattern is useful when components need to exhibit different behaviors based on different scenarios:

class ValidationStrategy {
  static strategies = {
    email: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
    phone: (value) => /^\d{10,15}$/.test(value),
    required: (value) => !!value.trim()
  };

  static validate(type, value) {
    return this.strategies[type] ? this.strategies[type](value) : false;
  }
}

class FormInput extends HTMLElement {
  validate() {
    const type = this.getAttribute('validation-type');
    const value = this.value;
    return ValidationStrategy.validate(type, value);
  }
}

Composite Pattern for Building Complex UIs

Web Components naturally fit the composite pattern for building hierarchical UIs:

class TreeItem extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          margin-left: 20px;
        }
      </style>
      <div class="item">
        <slot name="title"></slot>
        <div class="children">
          <slot name="children"></slot>
        </div>
      </div>
    `;
  }
}

customElements.define('tree-item', TreeItem);

// Usage example
document.body.innerHTML = `
  <tree-item>
    <span slot="title">Root node</span>
    <tree-item slot="children">
      <span slot="title">Child node 1</span>
    </tree-item>
    <tree-item slot="children">
      <span slot="title">Child node 2</span>
      <tree-item slot="children">
        <span slot="title">Grandchild node</span>
      </tree-item>
    </tree-item>
  </tree-item>
`;

State Pattern for Managing Component State

For components with complex state interactions, the state pattern can simplify logic:

class ToggleState {
  constructor(toggle) {
    this.toggle = toggle;
  }

  handleClick() {}
}

class OnState extends ToggleState {
  handleClick() {
    this.toggle.setState(new OffState(this.toggle));
    this.toggle.setAttribute('aria-checked', 'false');
  }
}

class OffState extends ToggleState {
  handleClick() {
    this.toggle.setState(new OnState(this.toggle));
    this.toggle.setAttribute('aria-checked', 'true');
  }
}

class StatefulToggle extends HTMLElement {
  constructor() {
    super();
    this.state = new OffState(this);
    this.addEventListener('click', () => this.state.handleClick());
  }

  setState(state) {
    this.state = state;
  }
}

Web Components and the Singleton Pattern

For globally unique components, the singleton pattern can be used:

class AppNotification extends HTMLElement {
  static instance = null;

  static getInstance() {
    if (!this.instance) {
      this.instance = new AppNotification();
      document.body.appendChild(this.instance);
    }
    return this.instance;
  }

  show(message) {
    this.textContent = message;
    this.style.display = 'block';
    setTimeout(() => { this.style.display = 'none' }, 3000);
  }
}

// Using the singleton
const notification = AppNotification.getInstance();
notification.show('Operation successful');

Adapter Pattern for Integrating Third-Party Libraries

The adapter pattern helps Web Components work with third-party libraries:

class ChartAdapter extends HTMLElement {
  constructor() {
    super();
    this.chart = null;
  }

  connectedCallback() {
    const type = this.getAttribute('type') || 'bar';
    const data = JSON.parse(this.getAttribute('data'));
    
    // Adapt to different chart libraries
    if (window.ChartJS) {
      this.initWithChartJS(type, data);
    } else if (window.Highcharts) {
      this.initWithHighcharts(type, data);
    }
  }

  initWithChartJS(type, data) {
    const canvas = document.createElement('canvas');
    this.appendChild(canvas);
    this.chart = new ChartJS(canvas, {
      type: type,
      data: data
    });
  }

  initWithHighcharts(type, data) {
    this.chart = Highcharts.chart(this, {
      chart: { type: type },
      series: data.series
    });
  }
}

Template Method Pattern for Defining Component Lifecycle

The lifecycle methods of Web Components naturally fit the template method pattern:

abstract class BaseComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.init();
  }

  // Template method
  init() {
    this.beforeRender();
    this.render();
    this.afterRender();
  }

  beforeRender() {
    // Default implementation, can be overridden by subclasses
  }

  abstract render();

  afterRender() {
    // Default implementation, can be overridden by subclasses
  }
}

class ConcreteComponent extends BaseComponent {
  render() {
    this.shadowRoot.innerHTML = `<p>Concrete component content</p>`;
  }
}

Proxy Pattern for Lazy-Loading Components

The proxy pattern can optimize the loading performance of Web Components:

class LazyImage extends HTMLElement {
  constructor() {
    super();
    this.observer = new IntersectionObserver(this.handleIntersect.bind(this));
  }

  connectedCallback() {
    this.observer.observe(this);
    this.innerHTML = '<div class="placeholder"></div>';
  }

  handleIntersect(entries) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        this.loadRealImage();
        this.observer.unobserve(this);
      }
    });
  }

  loadRealImage() {
    const src = this.getAttribute('data-src');
    const img = document.createElement('img');
    img.src = src;
    img.onload = () => {
      this.innerHTML = '';
      this.appendChild(img);
    };
  }
}

Command Pattern for Implementing Undoable Operations

For components that need to support undo operations, the command pattern is suitable:

class Command {
  constructor(component) {
    this.component = component;
    this.snapshot = null;
  }

  execute() {
    this.snapshot = this.component.getState();
  }

  undo() {
    if (this.snapshot) {
      this.component.setState(this.snapshot);
    }
  }
}

class EditableText extends HTMLElement {
  constructor() {
    super();
    this.commandHistory = [];
    this.currentPosition = -1;
    this.contentEditable = true;
  }

  saveState() {
    const command = new Command(this);
    command.execute();
    this.commandHistory = this.commandHistory.slice(0, this.currentPosition + 1);
    this.commandHistory.push(command);
    this.currentPosition++;
  }

  getState() {
    return this.innerHTML;
  }

  setState(state) {
    this.innerHTML = state;
  }

  undo() {
    if (this.currentPosition >= 0) {
      this.commandHistory[this.currentPosition].undo();
      this.currentPosition--;
    }
  }

  redo() {
    if (this.currentPosition < this.commandHistory.length - 1) {
      this.currentPosition++;
      this.setState(this.commandHistory[this.currentPosition].snapshot);
    }
  }
}