Advanced DOM Manipulation for Dynamic Popups: Complete Guide

Advanced DOM Manipulation for Dynamic Popups: Complete Guide

Creating dynamic, performant popup systems requires mastery of advanced DOM manipulation techniques that go beyond basic document.querySelector and element.appendChild. Modern web applications demand popup implementations that can handle complex interactions, real-time updates, and seamless performance across all devices. This comprehensive guide explores the intricate world of advanced DOM manipulation, from event delegation and virtual DOM patterns to efficient content loading and memory management strategies.

Dynamic popups present unique challenges that require sophisticated JavaScript solutions. When popups need to update content in real-time, handle complex user interactions, or manage large amounts of data, basic DOM operations become inefficient and can lead to poor user experience. Understanding advanced DOM manipulation patterns, performance optimization techniques, and modern JavaScript APIs is essential for building popup systems that are both powerful and maintainable.

Advanced Event Delegation Systems

Hierarchical Event Delegation

Implement multi-level event delegation for complex popup hierarchies:

class AdvancedEventDelegator {
  constructor(rootElement) {
    this.root = rootElement;
    this.eventMap = new Map();
    this.bubbleHandlers = new Map();
    this.captureHandlers = new Map();
    this.setupDelegation();
  }

  setupDelegation() {
    // Multiple event types with different phases
    const events = ['click', 'keydown', 'focus', 'blur', 'input', 'change'];

    events.forEach(eventType => {
      this.root.addEventListener(eventType, this.handleEvent.bind(this), true); // Capture
      this.root.addEventListener(eventType, this.handleEvent.bind(this), false); // Bubble
    });
  }

  handleEvent(event) {
    const path = this.getEventPath(event);
    const eventType = event.type;
    const phase = event.eventPhase === 1 ? 'capture' : 'bubble';

    // Process handlers in correct order
    const handlers = phase === 'capture' ?
      this.captureHandlers.get(eventType) :
      this.bubbleHandlers.get(eventType);

    if (handlers) {
      this.processHandlers(path, handlers, event);
    }
  }

  getEventPath(event) {
    const path = [];
    let current = event.target;

    while (current && current !== this.root) {
      path.push(current);
      current = current.parentElement;
    }

    path.push(this.root);
    return path;
  }

  processHandlers(path, handlers, event) {
    for (const element of path) {
      for (const [selector, handler] of handlers) {
        if (element.matches(selector)) {
          try {
            handler.call(element, event);
            if (event.stopPropagation) break;
          } catch (error) {
            console.error('Event handler error:', error);
          }
        }
      }
    }
  }

  delegate(selector, eventType, handler, options = {}) {
    const { phase = 'bubble', once = false } = options;
    const handlers = phase === 'capture' ?
      this.captureHandlers : this.bubbleHandlers;

    if (!handlers.has(eventType)) {
      handlers.set(eventType, new Map());
    }

    const eventHandlers = handlers.get(eventType);

    if (once) {
      const wrappedHandler = (event) => {
        handler.call(event.target, event);
        this.undelegate(selector, eventType, wrappedHandler);
      };
      eventHandlers.set(selector, wrappedHandler);
    } else {
      eventHandlers.set(selector, handler);
    }
  }

  undelegate(selector, eventType, handler) {
    [this.captureHandlers, this.bubbleHandlers].forEach(handlers => {
      const eventHandlers = handlers.get(eventType);
      if (eventHandlers && eventHandlers.get(selector) === handler) {
        eventHandlers.delete(selector);
      }
    });
  }
}

Context-Aware Event Handling

Implement context-sensitive event processing for popup interactions:

class ContextAwareEventManager {
  constructor() {
    this.contexts = new Map();
    this.globalHandlers = new Map();
    this.activeContext = null;
  }

  createContext(name, config = {}) {
    const context = {
      name,
      handlers: new Map(),
      priority: config.priority || 0,
      enabled: true,
      ...config
    };

    this.contexts.set(name, context);
    return context;
  }

  setActiveContext(contextName) {
    this.activeContext = this.contexts.get(contextName);
  }

  addHandler(contextName, eventType, selector, handler, options = {}) {
    const context = this.contexts.get(contextName);
    if (!context) throw new Error(`Context ${contextName} not found`);

    if (!context.handlers.has(eventType)) {
      context.handlers.set(eventType, new Map());
    }

    const eventHandlers = context.handlers.get(eventType);
    eventHandlers.set(selector, { handler, options });
  }

  handleEvent(event) {
    const relevantContexts = this.getRelevantContexts();

    for (const context of relevantContexts) {
      if (!context.enabled) continue;

      const handlers = context.handlers.get(event.type);
      if (handlers) {
        const handled = this.processContextHandlers(handlers, event, context);
        if (handled && this.shouldStopPropagation(event, context)) {
          event.stopPropagation();
          break;
        }
      }
    }
  }

  getRelevantContexts() {
    return Array.from(this.contexts.values())
      .filter(context => context.enabled)
      .sort((a, b) => b.priority - a.priority);
  }

  processContextHandlers(handlers, event, context) {
    const path = this.getEventPath(event);
    let handled = false;

    for (const element of path) {
      for (const [selector, { handler, options }] of handlers) {
        if (element.matches(selector)) {
          const result = this.executeHandler(handler, element, event, context, options);
          if (result !== false) {
            handled = true;
          }
          if (options.stopPropagation) {
            return true;
          }
        }
      }
    }

    return handled;
  }

  executeHandler(handler, element, event, context, options) {
    try {
      if (options.throttle) {
        return this.throttleHandler(handler, element, event, context, options);
      }

      if (options.debounce) {
        return this.debounceHandler(handler, element, event, context, options);
      }

      return handler.call(element, event, context);
    } catch (error) {
      console.error(`Error in ${context.name} handler:`, error);
      return false;
    }
  }
}

Performance-Optimized Event Systems

Implement high-performance event handling for complex popup interactions:

• Passive event listeners: Improve scrolling performance
• Event batching: Group multiple events for processing
• Handler memoization: Cache handler results
• Selector optimization: Efficient element matching
• Memory management: Clean up unused handlers

Virtual DOM Implementation for Popups

Lightweight Virtual DOM Engine

Create a minimal virtual DOM for efficient popup updates:

class VirtualNode {
  constructor(tag, props = {}, children = []) {
    this.tag = tag;
    this.props = props;
    this.children = children;
    this.key = props.key || null;
    this.ref = props.ref || null;
  }

  static createElement(tag, props, ...children) {
    return new VirtualNode(tag, props, children.flat());
  }
}

class VirtualDOM {
  constructor() {
    this.currentTree = null;
    this.nextTree = null;
    this.rootElement = null;
    this.componentMap = new Map();
    this.updateQueue = [];
    this.isUpdating = false;
  }

  render(vnode, container) {
    this.rootElement = container;
    this.nextTree = vnode;

    if (!this.currentTree) {
      // Initial render
      const element = this.createElement(vnode);
      container.appendChild(element);
      this.currentTree = vnode;
    } else {
      // Update render
      this.scheduleUpdate();
    }
  }

  createElement(vnode) {
    if (typeof vnode === 'string' || typeof vnode === 'number') {
      return document.createTextNode(vnode);
    }

    if (typeof vnode.tag === 'function') {
      return this.createComponent(vnode);
    }

    const element = document.createElement(vnode.tag);

    // Set attributes
    Object.entries(vnode.props).forEach(([key, value]) => {
      this.setAttribute(element, key, value);
    });

    // Append children
    vnode.children.forEach(child => {
      const childElement = this.createElement(child);
      element.appendChild(childElement);
    });

    return element;
  }

  createComponent(vnode) {
    const Component = vnode.tag;
    const props = vnode.props;

    if (this.componentMap.has(Component)) {
      const component = this.componentMap.get(Component);
      component.props = props;
      component.forceUpdate();
      return component.element;
    }

    const component = new Component(props);
    this.componentMap.set(Component, component);

    component.onUpdate = (newVNode) => {
      this.updateComponent(component, newVNode);
    };

    const element = component.render();
    component.element = element;

    return element;
  }

  diff(oldNode, newNode) {
    const patches = [];

    if (!oldNode && newNode) {
      patches.push({ type: 'CREATE', vnode: newNode });
    } else if (oldNode && !newNode) {
      patches.push({ type: 'REMOVE', vnode: oldNode });
    } else if (oldNode.tag !== newNode.tag) {
      patches.push({ type: 'REPLACE', oldVNode: oldNode, newVNode: newNode });
    } else {
      // Same tag, compare props and children
      const propPatches = this.diffProps(oldNode.props, newNode.props);
      if (propPatches.length > 0) {
        patches.push({ type: 'PROPS', patches: propPatches });
      }

      const childPatches = this.diffChildren(oldNode.children, newNode.children);
      patches.push(...childPatches);
    }

    return patches;
  }

  diffProps(oldProps, newProps) {
    const patches = [];
    const allKeys = new Set([...Object.keys(oldProps), ...Object.keys(newProps)]);

    for (const key of allKeys) {
      const oldValue = oldProps[key];
      const newValue = newProps[key];

      if (oldValue !== newValue) {
        if (newValue === undefined) {
          patches.push({ type: 'REMOVE_PROP', key });
        } else {
          patches.push({ type: 'SET_PROP', key, value: newValue });
        }
      }
    }

    return patches;
  }

  diffChildren(oldChildren, newChildren) {
    const patches = [];
    const maxLength = Math.max(oldChildren.length, newChildren.length);

    for (let i = 0; i < maxLength; i++) {
      const oldChild = oldChildren[i];
      const newChild = newChildren[i];

      const childPatches = this.diff(oldChild, newChild);
      if (childPatches.length > 0) {
        patches.push({ type: 'CHILD', index: i, patches: childPatches });
      }
    }

    return patches;
  }

  applyPatches(element, patches) {
    patches.forEach(patch => {
      switch (patch.type) {
        case 'CREATE':
          const newElement = this.createElement(patch.vnode);
          element.appendChild(newElement);
          break;

        case 'REMOVE':
          element.remove();
          break;

        case 'REPLACE':
          const replacement = this.createElement(patch.newVNode);
          element.parentNode.replaceChild(replacement, element);
          break;

        case 'PROPS':
          patch.patches.forEach(propPatch => {
            if (propPatch.type === 'SET_PROP') {
              this.setAttribute(element, propPatch.key, propPatch.value);
            } else if (propPatch.type === 'REMOVE_PROP') {
              element.removeAttribute(propPatch.key);
            }
          });
          break;

        case 'CHILD':
          const childElement = element.childNodes[patch.index];
          if (childElement) {
            this.applyPatches(childElement, patch.patches);
          }
          break;
      }
    });
  }

  scheduleUpdate() {
    if (this.isUpdating) return;

    this.isUpdating = true;
    requestAnimationFrame(() => {
      this.performUpdate();
      this.isUpdating = false;
    });
  }

  performUpdate() {
    const patches = this.diff(this.currentTree, this.nextTree);
    if (patches.length > 0) {
      this.applyPatches(this.rootElement.firstChild, patches);
      this.currentTree = this.nextTree;
    }
  }
}

Optimized Rendering Pipeline

Implement efficient rendering for dynamic popup content:

class PopupRenderer {
  constructor() {
    this.virtualDOM = new VirtualDOM();
    this.componentCache = new Map();
    this.templateCache = new Map();
    this.renderQueue = [];
    this.isRendering = false;
  }

  renderPopup(popupConfig, container) {
    const popupVNode = this.createPopupVNode(popupConfig);
    this.virtualDOM.render(popupVNode, container);
  }

  createPopupVNode(config) {
    const { type, content, position, animation, onClose } = config;

    return VirtualDOM.createElement('div', {
      className: `popup popup-${type}`,
      style: this.getPositionStyles(position),
      'data-popup-type': type
    }, [
      VirtualDOM.createElement('div', {
        className: 'popup-overlay',
        onClick: onClose
      }),
      VirtualDOM.createElement('div', {
        className: `popup-content ${animation || ''}`
      }, [
        this.createCloseButton(onClose),
        this.createContent(content)
      ])
    ]);
  }

  createCloseButton(onClose) {
    return VirtualDOM.createElement('button', {
      className: 'popup-close',
      onClick: onClose,
      'aria-label': 'Close popup'
    }, '×');
  }

  createContent(content) {
    if (typeof content === 'string') {
      return content;
    }

    if (Array.isArray(content)) {
      return content.map(item => this.createContent(item));
    }

    if (content.type === 'form') {
      return this.createFormVNode(content);
    }

    if (content.type === 'image') {
      return this.createImageVNode(content);
    }

    return content;
  }

  updatePopup(updates) {
    const currentConfig = this.getCurrentPopupConfig();
    const newConfig = { ...currentConfig, ...updates };
    this.renderPopup(newConfig, this.virtualDOM.rootElement);
  }

  getPositionStyles(position) {
    const { top, left, right, bottom, center = false } = position;
    const styles = {};

    if (top !== undefined) styles.top = `${top}px`;
    if (left !== undefined) styles.left = `${left}px`;
    if (right !== undefined) styles.right = `${right}px`;
    if (bottom !== undefined) styles.bottom = `${bottom}px`;

    if (center) {
      styles.transform = 'translate(-50%, -50%)';
      styles.position = 'fixed';
    }

    return styles;
  }
}

Component-Based Architecture

Build reusable popup components with lifecycle management:

• Component lifecycle: Mount, update, unmount management
• State management: Internal state handling
• Props validation: Type checking and validation
• Error boundaries: Component error handling
• Performance optimization: Memoization and caching

Dynamic Content Loading Systems

Progressive Content Loading

Implement intelligent content loading for popup performance:

class ProgressiveContentLoader {
  constructor() {
    this.contentCache = new Map();
    this.loadingPromises = new Map();
    this.observers = new Map();
    this.preloadQueue = [];
    this.networkMonitor = new NetworkMonitor();
  }

  async loadContent(contentConfig) {
    const { url, type, priority = 'normal', cache = true } = contentConfig;
    const cacheKey = this.getCacheKey(contentConfig);

    // Check cache first
    if (cache && this.contentCache.has(cacheKey)) {
      return this.contentCache.get(cacheKey);
    }

    // Check if already loading
    if (this.loadingPromises.has(cacheKey)) {
      return this.loadingPromises.get(cacheKey);
    }

    // Load content based on type
    const loadingPromise = this.loadContentByType(contentConfig);
    this.loadingPromises.set(cacheKey, loadingPromise);

    try {
      const content = await loadingPromise;

      if (cache) {
        this.contentCache.set(cacheKey, content);
      }

      return content;
    } finally {
      this.loadingPromises.delete(cacheKey);
    }
  }

  async loadContentByType(config) {
    const { type, url, data } = config;

    switch (type) {
      case 'html':
        return this.loadHTMLContent(url);
      case 'json':
        return this.loadJSONContent(url);
      case 'image':
        return this.loadImageContent(url);
      case 'template':
        return this.loadTemplateContent(url, data);
      case 'component':
        return this.loadComponentContent(url);
      default:
        throw new Error(`Unsupported content type: ${type}`);
    }
  }

  async loadHTMLContent(url) {
    const response = await fetch(url, {
      headers: { 'Accept': 'text/html' }
    });

    if (!response.ok) {
      throw new Error(`Failed to load HTML: ${response.status}`);
    }

    const html = await response.text();
    return this.parseHTMLContent(html);
  }

  async loadJSONContent(url) {
    const response = await fetch(url, {
      headers: { 'Accept': 'application/json' }
    });

    if (!response.ok) {
      throw new Error(`Failed to load JSON: ${response.status}`);
    }

    return response.json();
  }

  async loadImageContent(url) {
    return new Promise((resolve, reject) => {
      const img = new Image();

      img.onload = () => {
        resolve({
          url,
          width: img.naturalWidth,
          height: img.naturalHeight,
          element: img
        });
      };

      img.onerror = () => {
        reject(new Error(`Failed to load image: ${url}`));
      };

      img.src = url;
    });
  }

  async loadTemplateContent(url, data) {
    const template = await this.loadHTMLContent(url);
    return this.renderTemplate(template, data);
  }

  async loadComponentContent(url) {
    const module = await import(url);
    return module.default || module;
  }

  parseHTMLContent(html) {
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = html;
    return this.fragmentToNodeList(tempDiv);
  }

  fragmentToNodeList(fragment) {
    const nodes = [];
    let child = fragment.firstChild;

    while (child) {
      nodes.push(child.cloneNode(true));
      child = child.nextSibling;
    }

    return nodes;
  }

  renderTemplate(template, data) {
    if (typeof template === 'string') {
      return this.interpolateTemplate(template, data);
    }

    if (template instanceof DocumentFragment) {
      return this.processTemplateFragment(template, data);
    }

    return template;
  }

  interpolateTemplate(template, data) {
    return template.replace(/\{\{(\w+)\}\}/g, (match, key) => {
      return data[key] || '';
    });
  }

  processTemplateFragment(fragment, data) {
    const processed = fragment.cloneNode(true);
    const placeholders = processed.querySelectorAll('[data-template]');

    placeholders.forEach(placeholder => {
      const templateKey = placeholder.getAttribute('data-template');
      const value = data[templateKey];

      if (value !== undefined) {
        if (typeof value === 'object') {
          this.renderNestedTemplate(placeholder, value);
        } else {
          placeholder.textContent = value;
        }
      }
    });

    return processed;
  }

  preloadContent(contentConfigs) {
    contentConfigs.forEach(config => {
      this.preloadQueue.push({
        ...config,
        priority: config.priority || 'low',
        timestamp: Date.now()
      });
    });

    this.processPreloadQueue();
  }

  async processPreloadQueue() {
    if (this.preloadQueue.length === 0) return;

    // Sort by priority and timestamp
    this.preloadQueue.sort((a, b) => {
      const priorityOrder = { high: 3, normal: 2, low: 1 };
      return priorityOrder[b.priority] - priorityOrder[a.priority] || a.timestamp - b.timestamp;
    });

    const batch = this.preloadQueue.splice(0, 3); // Process 3 at a time

    await Promise.allSettled(
      batch.map(config => this.loadContent(config).catch(() => null))
    );

    // Continue processing if there are more items
    if (this.preloadQueue.length > 0) {
      setTimeout(() => this.processPreloadQueue(), 100);
    }
  }

  getCacheKey(config) {
    return `${config.type}:${config.url}:${JSON.stringify(config.data || {})}`;
  }

  clearCache(pattern) {
    if (pattern) {
      const regex = new RegExp(pattern);
      for (const [key] of this.contentCache) {
        if (regex.test(key)) {
          this.contentCache.delete(key);
        }
      }
    } else {
      this.contentCache.clear();
    }
  }
}

Network-Aware Loading

Adapt loading strategies based on network conditions:

class NetworkMonitor {
  constructor() {
    this.connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
    this.listeners = [];
    this.startMonitoring();
  }

  startMonitoring() {
    if (this.connection) {
      this.connection.addEventListener('change', this.handleConnectionChange.bind(this));
    }

    // Monitor online/offline status
    window.addEventListener('online', this.handleOnlineStatusChange.bind(this));
    window.addEventListener('offline', this.handleOnlineStatusChange.bind(this));

    // Monitor page visibility
    document.addEventListener('visibilitychange', this.handleVisibilityChange.bind(this));
  }

  getConnectionInfo() {
    if (!this.connection) {
      return {
        effectiveType: '4g',
        downlink: 10,
        rtt: 50,
        saveData: false
      };
    }

    return {
      effectiveType: this.connection.effectiveType,
      downlink: this.connection.downlink,
      rtt: this.connection.rtt,
      saveData: this.connection.saveData
    };
  }

  handleConnectionChange() {
    this.notifyListeners('connectionChange', this.getConnectionInfo());
  }

  handleOnlineStatusChange() {
    this.notifyListeners('onlineStatusChange', {
      online: navigator.onLine
    });
  }

  handleVisibilityChange() {
    this.notifyListeners('visibilityChange', {
      hidden: document.hidden
    });
  }

  addListener(event, callback) {
    this.listeners.push({ event, callback });
  }

  removeListener(callback) {
    this.listeners = this.listeners.filter(listener => listener.callback !== callback);
  }

  notifyListeners(event, data) {
    this.listeners
      .filter(listener => listener.event === event)
      .forEach(listener => listener.callback(data));
  }

  getAdaptiveLoadingStrategy(contentSize) {
    const connection = this.getConnectionInfo();
    const { effectiveType, saveData } = connection;

    // Define strategies based on connection quality
    const strategies = {
      'slow-2g': {
        timeout: 10000,
        retries: 3,
        chunkSize: 1024,
        progressive: true,
        compression: true
      },
      '2g': {
        timeout: 8000,
        retries: 2,
        chunkSize: 2048,
        progressive: true,
        compression: true
      },
      '3g': {
        timeout: 5000,
        retries: 2,
        chunkSize: 4096,
        progressive: false,
        compression: true
      },
      '4g': {
        timeout: 3000,
        retries: 1,
        chunkSize: 8192,
        progressive: false,
        compression: false
      }
    };

    let strategy = strategies[effectiveType] || strategies['3g'];

    // Adjust for data saver mode
    if (saveData) {
      strategy = { ...strategy, progressive: true, compression: true };
      strategy.chunkSize = Math.min(strategy.chunkSize, 1024);
    }

    // Adjust for content size
    if (contentSize > 1024 * 1024) { // > 1MB
      strategy.progressive = true;
      strategy.chunkSize = Math.min(strategy.chunkSize, 2048);
    }

    return strategy;
  }
}

Content Caching Strategies

Implement intelligent caching for popup content:

• Memory caching: In-memory content storage
• Service worker caching: Persistent offline storage
• Cache invalidation: Smart cache expiration
• Compression: Reduce memory usage
• Cache warming: Preload likely content

Advanced Performance Optimization

DOM Operation Batching

Batch DOM operations for improved performance:

class DOMBatcher {
  constructor() {
    this.operations = [];
    this.scheduled = false;
    this.frameId = null;
    this.observers = [];
  }

  addOperation(operation) {
    this.operations.push({
      ...operation,
      timestamp: performance.now()
    });

    this.scheduleFlush();
  }

  scheduleFlush() {
    if (this.scheduled) return;

    this.scheduled = true;
    this.frameId = requestAnimationFrame(() => {
      this.flush();
    });
  }

  flush() {
    this.scheduled = false;

    if (this.operations.length === 0) return;

    // Group operations by type
    const groupedOps = this.groupOperations(this.operations);

    // Execute operations in optimal order
    this.executeGroupedOperations(groupedOps);

    // Clear operations
    this.operations = [];

    // Notify observers
    this.notifyObservers();
  }

  groupOperations(operations) {
    const groups = {
      reads: [],
      writes: [],
      styles: [],
      attributes: [],
      removals: []
    };

    operations.forEach(op => {
      switch (op.type) {
        case 'read':
          groups.reads.push(op);
          break;
        case 'write':
          groups.writes.push(op);
          break;
        case 'style':
          groups.styles.push(op);
          break;
        case 'attribute':
          groups.attributes.push(op);
          break;
        case 'remove':
          groups.removals.push(op);
          break;
      }
    });

    return groups;
  }

  executeGroupedOperations(groups) {
    // Execute all reads first (layout thrashing prevention)
    this.executeReads(groups.reads);

    // Execute writes and style changes together
    this.executeWrites(groups.writes);
    this.executeStyles(groups.styles);

    // Execute attribute changes
    this.executeAttributes(groups.attributes);

    // Execute removals last
    this.executeRemovals(groups.removals);
  }

  executeReads(reads) {
    reads.forEach(op => {
      try {
        const result = this.executeRead(op);
        if (op.callback) {
          op.callback(result);
        }
      } catch (error) {
        console.error('DOM read error:', error);
      }
    });
  }

  executeWrites(writes) {
    // Optimize by batching similar writes
    const writeBatches = this.batchWrites(writes);

    writeBatches.forEach(batch => {
      try {
        this.executeWriteBatch(batch);
      } catch (error) {
        console.error('DOM write error:', error);
      }
    });
  }

  batchWrites(writes) {
    const batches = new Map();

    writes.forEach(write => {
      const key = `${write.element.tagName}:${write.property}`;

      if (!batches.has(key)) {
        batches.set(key, []);
      }

      batches.get(key).push(write);
    });

    return Array.from(batches.values());
  }

  executeWriteBatch(batch) {
    // Use last write in batch (wins over previous writes)
    const lastWrite = batch[batch.length - 1];
    lastWrite.element[lastWrite.property] = lastWrite.value;
  }

  executeStyles(styles) {
    // Group style changes by element
    const styleGroups = new Map();

    styles.forEach(style => {
      if (!styleGroups.has(style.element)) {
        styleGroups.set(style.element, {});
      }

      styleGroups.get(style.element)[style.property] = style.value;
    });

    // Apply styles in batches
    styleGroups.forEach((styleObj, element) => {
      Object.assign(element.style, styleObj);
    });
  }

  executeAttributes(attributes) {
    // Group attribute changes by element
    const attrGroups = new Map();

    attributes.forEach(attr => {
      if (!attrGroups.has(attr.element)) {
        attrGroups.set(attr.element, {});
      }

      attrGroups.get(attr.element)[attr.name] = attr.value;
    });

    // Apply attributes in batches
    attrGroups.forEach((attrObj, element) => {
      Object.entries(attrObj).forEach(([name, value]) => {
        if (value === null || value === undefined) {
          element.removeAttribute(name);
        } else {
          element.setAttribute(name, value);
        }
      });
    });
  }

  executeRemovals(removals) {
    // Remove elements in reverse order (children first)
    const sortedRemovals = removals.sort((a, b) => {
      return b.element.compareDocumentPosition(a.element) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
    });

    sortedRemovals.forEach(removal => {
      try {
        if (removal.element.parentNode) {
          removal.element.parentNode.removeChild(removal.element);
        }
      } catch (error) {
        console.error('DOM removal error:', error);
      }
    });
  }

  // Convenience methods
  setStyle(element, property, value) {
    this.addOperation({
      type: 'style',
      element,
      property,
      value
    });
  }

  setAttribute(element, name, value) {
    this.addOperation({
      type: 'attribute',
      element,
      name,
      value
    });
  }

  removeElement(element) {
    this.addOperation({
      type: 'remove',
      element
    });
  }

  addClass(element, className) {
    this.addOperation({
      type: 'write',
      element,
      property: 'className',
      value: `${element.className} ${className}`.trim()
    });
  }

  removeClass(element, className) {
    this.addOperation({
      type: 'write',
      element,
      property: 'className',
      value: element.className.replace(new RegExp(`\\b${className}\\b`, 'g'), '').trim()
    });
  }

  addObserver(callback) {
    this.observers.push(callback);
  }

  removeObserver(callback) {
    this.observers = this.observers.filter(observer => observer !== callback);
  }

  notifyObservers() {
    this.observers.forEach(callback => {
      try {
        callback();
      } catch (error) {
        console.error('Observer error:', error);
      }
    });
  }
}

Memory Management and Cleanup

Implement comprehensive memory management:

class PopupMemoryManager {
  constructor() {
    this.popupInstances = new WeakMap();
    this.eventListeners = new WeakMap();
    this.observers = new WeakMap();
    this.timers = new Set();
    this.memoryUsage = new Map();
    this.cleanupTasks = [];
  }

  registerPopup(popupElement, popupInstance) {
    this.popupInstances.set(popupElement, popupInstance);
    this.setupMemoryTracking(popupElement);
  }

  setupMemoryTracking(popupElement) {
    // Track DOM nodes
    const nodeCount = this.countNodes(popupElement);
    this.memoryUsage.set(popupElement, {
      nodeCount,
      timestamp: Date.now(),
      lastAccessed: Date.now()
    });

    // Setup memory pressure monitoring
    this.monitorMemoryPressure(popupElement);
  }

  countNodes(element) {
    let count = 0;
    const walker = document.createTreeWalker(
      element,
      NodeFilter.SHOW_ALL,
      null,
      false
    );

    while (walker.nextNode()) {
      count++;
    }

    return count;
  }

  monitorMemoryPressure(popupElement) {
    const observer = new ResizeObserver(entries => {
      entries.forEach(entry => {
        const usage = this.memoryUsage.get(popupElement);
        if (usage) {
          usage.lastAccessed = Date.now();

          // Check for memory pressure
          if (entry.contentRect.width * entry.contentRect.height > 1000000) {
            this.handleMemoryPressure(popupElement);
          }
        }
      });
    });

    observer.observe(popupElement);
    this.observers.set(popupElement, observer);
  }

  handleMemoryPressure(popupElement) {
    console.warn('Memory pressure detected for popup:', popupElement);

    // Implement cleanup strategies
    this.cleanupUnusedResources(popupElement);
    this.optimizeEventListeners(popupElement);
    this.suggestMemoryOptimization(popupElement);
  }

  cleanupUnusedResources(popupElement) {
    const popup = this.popupInstances.get(popupElement);
    if (!popup) return;

    // Clear unused images
    const images = popupElement.querySelectorAll('img');
    images.forEach(img => {
      if (!this.isElementInViewport(img)) {
        img.src = '';
        img.removeAttribute('srcset');
      }
    });

    // Clear unused canvas elements
    const canvases = popupElement.querySelectorAll('canvas');
    canvases.forEach(canvas => {
      const ctx = canvas.getContext('2d');
      if (ctx) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
      }
    });
  }

  optimizeEventListeners(popupElement) {
    const listeners = this.eventListeners.get(popupElement);
    if (!listeners) return;

    // Remove unused listeners
    listeners.forEach((listener, eventType) => {
      if (!this.isEventTypeUsed(popupElement, eventType)) {
        popupElement.removeEventListener(eventType, listener);
        listeners.delete(eventType);
      }
    });
  }

  isEventTypeUsed(element, eventType) {
    // Check if any child elements have handlers for this event type
    const elements = element.querySelectorAll('*');
    return Array.from(elements).some(el => {
      const listeners = getEventListeners?.(el);
      return listeners && listeners[eventType] && listeners[eventType].length > 0;
    });
  }

  addEventListenerWithCleanup(element, eventType, handler, options) {
    element.addEventListener(eventType, handler, options);

    // Store reference for cleanup
    if (!this.eventListeners.has(element)) {
      this.eventListeners.set(element, new Map());
    }

    const listeners = this.eventListeners.get(element);
    if (!listeners.has(eventType)) {
      listeners.set(eventType, []);
    }

    listeners.get(eventType).push({ handler, options });
  }

  addTimer(timerId) {
    this.timers.add(timerId);
  }

  removeTimer(timerId) {
    this.timers.delete(timerId);
  }

  scheduleCleanup(callback, delay = 5000) {
    const timerId = setTimeout(() => {
      callback();
      this.removeTimer(timerId);
    }, delay);

    this.addTimer(timerId);
  }

  forceGarbageCollection() {
    // Clear all timers
    this.timers.forEach(timerId => {
      clearTimeout(timerId);
      clearInterval(timerId);
    });
    this.timers.clear();

    // Disconnect all observers
    for (const [element, observer] of this.observers) {
      observer.disconnect();
    }

    // Clear memory usage tracking
    this.memoryUsage.clear();

    // Suggest garbage collection
    if (window.gc) {
      window.gc();
    }
  }

  getMemoryUsage() {
    const total = Array.from(this.memoryUsage.values()).reduce((sum, usage) => {
      return sum + usage.nodeCount;
    }, 0);

    return {
      totalNodes: total,
      popupCount: this.memoryUsage.size,
      activeTimers: this.timers.size,
      memoryPressure: this.assessMemoryPressure()
    };
  }

  assessMemoryPressure() {
    const usage = this.getMemoryUsage();

    if (usage.totalNodes > 10000) return 'high';
    if (usage.totalNodes > 5000) return 'medium';
    return 'low';
  }

  cleanup(popupElement) {
    // Clean up event listeners
    const listeners = this.eventListeners.get(popupElement);
    if (listeners) {
      listeners.forEach((handlerList, eventType) => {
        handlerList.forEach(({ handler }) => {
          popupElement.removeEventListener(eventType, handler);
        });
      });
      this.eventListeners.delete(popupElement);
    }

    // Disconnect observers
    const observer = this.observers.get(popupElement);
    if (observer) {
      observer.disconnect();
      this.observers.delete(popupElement);
    }

    // Clear memory tracking
    this.memoryUsage.delete(popupElement);

    // Remove popup instance reference
    this.popupInstances.delete(popupElement);
  }
}

Performance Monitoring

Implement comprehensive performance tracking:

• Frame rate monitoring: Track animation performance
• Memory usage tracking: Monitor memory consumption
• Network performance: Track loading times
• User interaction metrics: Measure response times
• Automatic optimization: Performance-based adjustments

Advanced Interaction Patterns

Gesture Recognition System

Implement advanced gesture detection for popup interactions:

class GestureRecognizer {
  constructor(element) {
    this.element = element;
    this.gestures = new Map();
    this.currentGesture = null;
    this.touchHistory = [];
    this.config = {
      swipeThreshold: 50,
      tapTimeout: 300,
      longPressTimeout: 500,
      doubleTapTimeout: 300,
      pinchThreshold: 20
    };

    this.setupEventListeners();
  }

  setupEventListeners() {
    // Touch events
    this.element.addEventListener('touchstart', this.handleTouchStart.bind(this), { passive: false });
    this.element.addEventListener('touchmove', this.handleTouchMove.bind(this), { passive: false });
    this.element.addEventListener('touchend', this.handleTouchEnd.bind(this), { passive: false });
    this.element.addEventListener('touchcancel', this.handleTouchCancel.bind(this));

    // Mouse events (for desktop)
    this.element.addEventListener('mousedown', this.handleMouseDown.bind(this));
    this.element.addEventListener('mousemove', this.handleMouseMove.bind(this));
    this.element.addEventListener('mouseup', this.handleMouseUp.bind(this));
  }

  handleTouchStart(event) {
    this.touchHistory = Array.from(event.touches).map(touch => ({
      id: touch.identifier,
      x: touch.clientX,
      y: touch.clientY,
      timestamp: Date.now()
    }));

    this.startGestureDetection(event);
  }

  handleTouchMove(event) {
    this.updateTouchHistory(event);
    this.processGestureMove(event);
  }

  handleTouchEnd(event) {
    this.finalizeGesture(event);
  }

  startGestureDetection(event) {
    if (this.touchHistory.length === 1) {
      // Single touch - could be tap, long press, or swipe
      this.currentGesture = {
        type: 'potential',
        startTime: Date.now(),
        startX: this.touchHistory[0].x,
        startY: this.touchHistory[0].y
      };

      // Set timeouts for different gestures
      this.tapTimer = setTimeout(() => {
        if (this.currentGesture && this.currentGesture.type === 'potential') {
          this.triggerGesture('longpress', {
            x: this.currentGesture.startX,
            y: this.currentGesture.startY
          });
        }
      }, this.config.longPressTimeout);

    } else if (this.touchHistory.length === 2) {
      // Two fingers - could be pinch or rotate
      this.currentGesture = {
        type: 'pinch',
        startTime: Date.now(),
        startDistance: this.getDistance(this.touchHistory[0], this.touchHistory[1]),
        startAngle: this.getAngle(this.touchHistory[0], this.touchHistory[1])
      };
    }
  }

  processGestureMove(event) {
    if (!this.currentGesture) return;

    if (this.currentGesture.type === 'potential') {
      // Check if movement exceeds swipe threshold
      const deltaX = this.touchHistory[0].x - this.currentGesture.startX;
      const deltaY = this.touchHistory[0].y - this.currentGesture.startY;
      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);

      if (distance > this.config.swipeThreshold) {
        // Clear tap timer
        clearTimeout(this.tapTimer);

        // Determine swipe direction
        const direction = this.getSwipeDirection(deltaX, deltaY);

        this.currentGesture = {
          type: 'swipe',
          direction,
          startX: this.currentGesture.startX,
          startY: this.currentGesture.startY,
          currentX: this.touchHistory[0].x,
          currentY: this.touchHistory[0].y
        };

        this.triggerGesture('swipe-start', {
          direction,
          startX: this.currentGesture.startX,
          startY: this.currentGesture.startY
        });
      }

    } else if (this.currentGesture.type === 'pinch') {
      const currentDistance = this.getDistance(this.touchHistory[0], this.touchHistory[1]);
      const scale = currentDistance / this.currentGesture.startDistance;

      this.triggerGesture('pinch', {
        scale,
        centerX: (this.touchHistory[0].x + this.touchHistory[1].x) / 2,
        centerY: (this.touchHistory[0].y + this.touchHistory[1].y) / 2
      });
    }
  }

  finalizeGesture(event) {
    clearTimeout(this.tapTimer);

    if (!this.currentGesture) return;

    if (this.currentGesture.type === 'potential') {
      // Check for tap
      const duration = Date.now() - this.currentGesture.startTime;
      if (duration < this.config.tapTimeout) {
        this.triggerGesture('tap', {
          x: this.currentGesture.startX,
          y: this.currentGesture.startY
        });
      }

    } else if (this.currentGesture.type === 'swipe') {
      this.triggerGesture('swipe-end', {
        direction: this.currentGesture.direction,
        startX: this.currentGesture.startX,
        startY: this.currentGesture.startY,
        endX: this.currentGesture.currentX,
        endY: this.currentGesture.currentY
      });
    }

    this.currentGesture = null;
    this.touchHistory = [];
  }

  getDistance(touch1, touch2) {
    const dx = touch2.x - touch1.x;
    const dy = touch2.y - touch1.y;
    return Math.sqrt(dx * dx + dy * dy);
  }

  getAngle(touch1, touch2) {
    return Math.atan2(touch2.y - touch1.y, touch2.x - touch1.x) * 180 / Math.PI;
  }

  getSwipeDirection(deltaX, deltaY) {
    const absDeltaX = Math.abs(deltaX);
    const absDeltaY = Math.abs(deltaY);

    if (absDeltaX > absDeltaY) {
      return deltaX > 0 ? 'right' : 'left';
    } else {
      return deltaY > 0 ? 'down' : 'up';
    }
  }

  updateTouchHistory(event) {
    this.touchHistory = Array.from(event.touches).map(touch => ({
      id: touch.identifier,
      x: touch.clientX,
      y: touch.clientY,
      timestamp: Date.now()
    }));
  }

  triggerGesture(type, data) {
    const handlers = this.gestures.get(type);
    if (handlers) {
      handlers.forEach(handler => {
        try {
          handler(data);
        } catch (error) {
          console.error('Gesture handler error:', error);
        }
      });
    }

    // Dispatch custom event
    this.element.dispatchEvent(new CustomEvent('gesture', {
      detail: { type, ...data }
    }));
  }

  on(gestureType, handler) {
    if (!this.gestures.has(gestureType)) {
      this.gestures.set(gestureType, []);
    }
    this.gestures.get(gestureType).push(handler);
  }

  off(gestureType, handler) {
    const handlers = this.gestures.get(gestureType);
    if (handlers) {
      const index = handlers.indexOf(handler);
      if (index > -1) {
        handlers.splice(index, 1);
      }
    }
  }

  destroy() {
    // Remove event listeners
    this.element.removeEventListener('touchstart', this.handleTouchStart);
    this.element.removeEventListener('touchmove', this.handleTouchMove);
    this.element.removeEventListener('touchend', this.handleTouchEnd);
    this.element.removeEventListener('touchcancel', this.handleTouchCancel);

    // Clear timers
    clearTimeout(this.tapTimer);

    // Clear gesture handlers
    this.gestures.clear();
  }
}

Context Menu Integration

Create custom context menus for popup interactions:

class ContextMenuManager {
  constructor() {
    this.menus = new Map();
    this.activeMenu = null;
    this.globalHandlers = new Map();
    this.setupGlobalListeners();
  }

  setupGlobalListeners() {
    document.addEventListener('contextmenu', this.handleContextMenu.bind(this));
    document.addEventListener('click', this.handleGlobalClick.bind(this));
    document.addEventListener('keydown', this.handleEscapeKey.bind(this));
  }

  createMenu(id, config = {}) {
    const menu = {
      id,
      items: [],
      visible: false,
      position: { x: 0, y: 0 },
      target: null,
      ...config
    };

    this.menus.set(id, menu);
    return menu;
  }

  addMenuItem(menuId, item) {
    const menu = this.menus.get(menuId);
    if (!menu) throw new Error(`Menu ${menuId} not found`);

    const menuItem = {
      id: item.id || `item-${Date.now()}`,
      label: item.label || '',
      icon: item.icon || null,
      action: item.action || null,
      disabled: item.disabled || false,
      separator: item.separator || false,
      submenu: item.submenu || null,
      ...item
    };

    menu.items.push(menuItem);
    return menuItem;
  }

  showMenu(menuId, x, y, target = null) {
    const menu = this.menus.get(menuId);
    if (!menu) return;

    // Hide any currently active menu
    this.hideActiveMenu();

    menu.visible = true;
    menu.position = this.adjustPosition(x, y, menu);
    menu.target = target;
    this.activeMenu = menu;

    this.renderMenu(menu);
    this.attachMenuListeners(menu);
  }

  hideMenu(menuId) {
    const menu = this.menus.get(menuId);
    if (!menu) return;

    menu.visible = false;
    this.removeMenuElement(menu);

    if (this.activeMenu === menu) {
      this.activeMenu = null;
    }
  }

  hideActiveMenu() {
    if (this.activeMenu) {
      this.hideMenu(this.activeMenu.id);
    }
  }

  renderMenu(menu) {
    const menuElement = document.createElement('div');
    menuElement.className = 'context-menu';
    menuElement.setAttribute('role', 'menu');
    menuElement.setAttribute('aria-label', 'Context menu');
    menuElement.style.left = `${menu.position.x}px`;
    menuElement.style.top = `${menu.position.y}px`;

    menu.items.forEach(item => {
      const itemElement = this.createMenuItem(item);
      menuElement.appendChild(itemElement);
    });

    document.body.appendChild(menuElement);
    menu.element = menuElement;

    // Focus first enabled item
    const firstEnabled = menuElement.querySelector('.menu-item:not(.disabled)');
    if (firstEnabled) {
      firstEnabled.focus();
    }
  }

  createMenuItem(item) {
    if (item.separator) {
      const separator = document.createElement('div');
      separator.className = 'menu-separator';
      separator.setAttribute('role', 'separator');
      return separator;
    }

    const itemElement = document.createElement('div');
    itemElement.className = 'menu-item';
    itemElement.setAttribute('role', 'menuitem');
    itemElement.setAttribute('tabindex', '-1');
    itemElement.setAttribute('aria-disabled', item.disabled);

    if (item.disabled) {
      itemElement.classList.add('disabled');
    }

    // Icon
    if (item.icon) {
      const iconElement = document.createElement('span');
      iconElement.className = 'menu-icon';
      iconElement.innerHTML = item.icon;
      itemElement.appendChild(iconElement);
    }

    // Label
    const labelElement = document.createElement('span');
    labelElement.className = 'menu-label';
    labelElement.textContent = item.label;
    itemElement.appendChild(labelElement);

    // Submenu indicator
    if (item.submenu) {
      const arrowElement = document.createElement('span');
      arrowElement.className = 'menu-arrow';
      arrowElement.innerHTML = '▶';
      itemElement.appendChild(arrowElement);
    }

    // Event listeners
    itemElement.addEventListener('click', (e) => {
      e.preventDefault();
      e.stopPropagation();

      if (!item.disabled && item.action) {
        item.action({
          target: item,
          menuTarget: this.activeMenu?.target,
          event: e
        });

        this.hideActiveMenu();
      }
    });

    itemElement.addEventListener('mouseenter', () => {
      if (!item.disabled) {
        this.highlightMenuItem(itemElement);

        if (item.submenu) {
          this.showSubmenu(item, itemElement);
        }
      }
    });

    return itemElement;
  }

  adjustPosition(x, y, menu) {
    const viewportWidth = window.innerWidth;
    const viewportHeight = window.innerHeight;
    const menuWidth = 200; // Estimated width
    const menuHeight = menu.items.length * 30; // Estimated height

    let adjustedX = x;
    let adjustedY = y;

    // Adjust horizontal position
    if (x + menuWidth > viewportWidth) {
      adjustedX = viewportWidth - menuWidth - 10;
    }

    // Adjust vertical position
    if (y + menuHeight > viewportHeight) {
      adjustedY = viewportHeight - menuHeight - 10;
    }

    // Ensure menu stays within viewport
    adjustedX = Math.max(10, adjustedX);
    adjustedY = Math.max(10, adjustedY);

    return { x: adjustedX, y: adjustedY };
  }

  attachMenuListeners(menu) {
    // Keyboard navigation
    const keyHandler = (e) => this.handleMenuKeydown(e, menu);
    menu.element.addEventListener('keydown', keyHandler);
    menu.keyHandler = keyHandler;

    // Mouse leave handling
    const mouseLeaveHandler = () => {
      setTimeout(() => {
        if (!menu.element.matches(':hover')) {
          this.hideMenu(menu.id);
        }
      }, 300);
    };
    menu.element.addEventListener('mouseleave', mouseLeaveHandler);
    menu.mouseLeaveHandler = mouseLeaveHandler;
  }

  handleMenuKeydown(event, menu) {
    const items = Array.from(menu.element.querySelectorAll('.menu-item:not(.disabled)'));
    const currentIndex = items.findIndex(item => item === document.activeElement);

    switch (event.key) {
      case 'ArrowDown':
        event.preventDefault();
        const nextIndex = (currentIndex + 1) % items.length;
        items[nextIndex].focus();
        break;

      case 'ArrowUp':
        event.preventDefault();
        const prevIndex = currentIndex === 0 ? items.length - 1 : currentIndex - 1;
        items[prevIndex].focus();
        break;

      case 'Escape':
        event.preventDefault();
        this.hideActiveMenu();
        break;

      case 'Enter':
      case ' ':
        event.preventDefault();
        if (document.activeElement) {
          document.activeElement.click();
        }
        break;
    }
  }

  showSubmenu(item, itemElement) {
    // Implementation for submenu display
    const submenu = this.menus.get(item.submenu);
    if (submenu) {
      const rect = itemElement.getBoundingClientRect();
      this.showMenu(
        item.submenu,
        rect.right,
        rect.top,
        this.activeMenu?.target
      );
    }
  }

  handleContextMenu(event) {
    const target = event.target;
    const menuId = target.getAttribute('data-context-menu');

    if (menuId && this.menus.has(menuId)) {
      event.preventDefault();
      this.showMenu(menuId, event.clientX, event.clientY, target);
    }
  }

  handleGlobalClick(event) {
    if (this.activeMenu && !this.activeMenu.element.contains(event.target)) {
      this.hideActiveMenu();
    }
  }

  handleEscapeKey(event) {
    if (event.key === 'Escape' && this.activeMenu) {
      this.hideActiveMenu();
    }
  }

  removeMenuElement(menu) {
    if (menu.element) {
      // Remove event listeners
      if (menu.keyHandler) {
        menu.element.removeEventListener('keydown', menu.keyHandler);
      }
      if (menu.mouseLeaveHandler) {
        menu.element.removeEventListener('mouseleave', menu.mouseLeaveHandler);
      }

      // Remove from DOM
      menu.element.remove();
      menu.element = null;
    }
  }

  highlightMenuItem(itemElement) {
    // Remove highlight from all items
    const menu = itemElement.parentElement;
    menu.querySelectorAll('.menu-item').forEach(item => {
      item.classList.remove('highlighted');
    });

    // Add highlight to current item
    itemElement.classList.add('highlighted');
  }

  destroy() {
    // Remove global listeners
    document.removeEventListener('contextmenu', this.handleContextMenu);
    document.removeEventListener('click', this.handleGlobalClick);
    document.removeEventListener('keydown', this.handleEscapeKey);

    // Hide active menu
    this.hideActiveMenu();

    // Clear all menus
    this.menus.clear();
  }
}

Drag and Drop Integration

Implement drag and drop functionality for popup elements:

• Drag initiation: Handle drag start events
• Drop zones: Define valid drop targets
• Visual feedback: Drag state indicators
• Touch support: Mobile drag interactions
• Accessibility: Screen reader support

Modern JavaScript APIs Integration

Web Components and Shadow DOM

Create encapsulated popup components with web technologies:

class DynamicPopup extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.isOpen = false;
    this.content = '';
    this.position = { x: 0, y: 0 };
  }

  static get observedAttributes() {
    return ['open', 'content', 'position-x', 'position-y', 'type'];
  }

  connectedCallback() {
    this.render();
    this.setupEventListeners();
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (oldValue === newValue) return;

    switch (name) {
      case 'open':
        this.isOpen = newValue !== null;
        this.updateVisibility();
        break;
      case 'content':
        this.content = newValue || '';
        this.updateContent();
        break;
      case 'position-x':
        this.position.x = parseInt(newValue) || 0;
        this.updatePosition();
        break;
      case 'position-y':
        this.position.y = parseInt(newValue) || 0;
        this.updatePosition();
        break;
      case 'type':
        this.updateType(newValue);
        break;
    }
  }

  render() {
    this.shadowRoot.innerHTML = `
      

      

        

          ×
          
        
      
    `;
  }

  setupEventListeners() {
    const closeButton = this.shadowRoot.querySelector('.popup-close');
    const overlay = this.shadowRoot.querySelector('.popup-overlay');

    closeButton.addEventListener('click', () => this.close());
    overlay.addEventListener('click', (e) => {
      if (e.target === overlay) {
        this.close();
      }
    });

    // Keyboard events
    this.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') {
        this.close();
      }
    });
  }

  open() {
    this.setAttribute('open', '');
    this.isOpen = true;
    this.dispatchEvent(new CustomEvent('popup-open', {
      bubbles: true,
      detail: { popup: this }
    }));
  }

  close() {
    this.removeAttribute('open');
    this.isOpen = false;
    this.dispatchEvent(new CustomEvent('popup-close', {
      bubbles: true,
      detail: { popup: this }
    }));
  }

  setContent(content) {
    this.setAttribute('content', content);
  }

  setPosition(x, y) {
    this.setAttribute('position-x', x);
    this.setAttribute('position-y', y);
  }

  updateVisibility() {
    const content = this.shadowRoot.querySelector('.popup-content');
    if (this.isOpen) {
      this.style.display = 'block';
      this.focus();
      // Trap focus
      this.trapFocus();
    } else {
      this.style.display = 'none';
      this.releaseFocus();
    }
  }

  updateContent() {
    const slot = this.shadowRoot.querySelector('.slot-content');
    if (slot) {
      slot.innerHTML = this.content;
    }
  }

  updatePosition() {
    const content = this.shadowRoot.querySelector('.popup-content');
    if (content) {
      content.style.left = `${this.position.x}px`;
      content.style.top = `${this.position.y}px`;
      content.style.transform = 'none';
    }
  }

  updateType(type) {
    const content = this.shadowRoot.querySelector('.popup-content');
    if (content) {
      content.className = `popup-content popup-type-${type}`;
    }
  }

  trapFocus() {
    this.focusableElements = this.shadowRoot.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );

    this.firstFocusable = this.focusableElements[0];
    this.lastFocusable = this.focusableElements[this.focusableElements.length - 1];

    this.focusHandler = (e) => this.handleFocusTrap(e);
    this.addEventListener('keydown', this.focusHandler);
  }

  handleFocusTrap(e) {
    if (e.key === 'Tab') {
      if (e.shiftKey) {
        if (document.activeElement === this.firstFocusable) {
          e.preventDefault();
          this.lastFocusable.focus();
        }
      } else {
        if (document.activeElement === this.lastFocusable) {
          e.preventDefault();
          this.firstFocusable.focus();
        }
      }
    }
  }

  releaseFocus() {
    if (this.focusHandler) {
      this.removeEventListener('keydown', this.focusHandler);
      this.focusHandler = null;
    }
  }

  focus() {
    if (this.firstFocusable) {
      this.firstFocusable.focus();
    } else {
      this.shadowRoot.querySelector('.popup-close').focus();
    }
  }
}

// Register the custom element
customElements.define('dynamic-popup', DynamicPopup);

Intersection Observer Integration

Implement viewport-based popup triggers with Intersection Observer:

• Scroll-triggered popups: Activate on element visibility
• Lazy loading: Load content when needed
• Performance optimization: Offload visibility checks
• Threshold management: Fine-tune trigger points
• Multiple observers: Handle different trigger scenarios

RequestAnimationFrame Integration

Create smooth animations with optimized frame scheduling:

• Animation loops: Efficient animation management
• Frame synchronization: 60fps target maintenance
• Performance monitoring: Frame rate tracking
• Batched updates: Group DOM changes
• Resource management: Clean up animations

Error Handling and Recovery

Comprehensive Error Management

Implement robust error handling for DOM operations:

class DOMErrorHandler {
  constructor() {
    this.errors = [];
    this.errorListeners = [];
    this.retryStrategies = new Map();
    this.circuitBreakers = new Map();
    this.setupGlobalHandlers();
  }

  setupGlobalHandlers() {
    window.addEventListener('error', this.handleGlobalError.bind(this));
    window.addEventListener('unhandledrejection', this.handlePromiseRejection.bind(this));
  }

  handleGlobalError(event) {
    const error = {
      type: 'javascript',
      message: event.message,
      filename: event.filename,
      lineno: event.lineno,
      colno: event.colno,
      stack: event.error?.stack,
      timestamp: Date.now(),
      context: this.getErrorContext()
    };

    this.processError(error);
  }

  handlePromiseRejection(event) {
    const error = {
      type: 'promise',
      reason: event.reason,
      timestamp: Date.now(),
      context: this.getErrorContext()
    };

    this.processError(error);
  }

  processError(error) {
    this.errors.push(error);

    // Check if we should retry
    if (this.shouldRetry(error)) {
      this.retryOperation(error);
      return;
    }

    // Check circuit breaker
    if (this.isCircuitBreakerOpen(error.type)) {
      console.warn('Circuit breaker is open for:', error.type);
      return;
    }

    // Notify listeners
    this.notifyErrorListeners(error);

    // Log error
    this.logError(error);

    // Update circuit breaker
    this.updateCircuitBreaker(error.type, false);
  }

  wrapDOMOperation(operation, context = {}) {
    return async (...args) => {
      try {
        const result = await operation.apply(this, args);
        this.updateCircuitBreaker('dom-operation', true);
        return result;
      } catch (error) {
        const domError = {
          type: 'dom-operation',
          message: error.message,
          stack: error.stack,
          timestamp: Date.now(),
          context: { ...context, args },
          originalError: error
        };

        this.processError(domError);
        throw error;
      }
    };
  }

  shouldRetry(error) {
    const retryConfig = this.retryStrategies.get(error.type);
    if (!retryConfig) return false;

    const recentErrors = this.getRecentErrors(error.type, retryConfig.timeWindow);
    return recentErrors.length < retryConfig.maxRetries;
  }

  retryOperation(error) {
    const retryConfig = this.retryStrategies.get(error.type);
    if (!retryConfig || !retryConfig.retryFn) return;

    setTimeout(() => {
      try {
        retryConfig.retryFn(error);
        console.log(`Successfully retried operation for ${error.type}`);
      } catch (retryError) {
        console.error(`Retry failed for ${error.type}:`, retryError);
      }
    }, retryConfig.delay);
  }

  getRecentErrors(type, timeWindow) {
    const cutoff = Date.now() - timeWindow;
    return this.errors.filter(error =>
      error.type === type && error.timestamp > cutoff
    );
  }

  updateCircuitBreaker(type, success) {
    if (!this.circuitBreakers.has(type)) {
      this.circuitBreakers.set(type, {
        failures: 0,
        successes: 0,
        lastFailure: 0,
        state: 'closed'
      });
    }

    const breaker = this.circuitBreakers.get(type);

    if (success) {
      breaker.successes++;
      if (breaker.state === 'half-open' && breaker.successes >= 2) {
        breaker.state = 'closed';
        breaker.failures = 0;
      }
    } else {
      breaker.failures++;
      breaker.lastFailure = Date.now();

      if (breaker.failures >= 5) {
        breaker.state = 'open';
      }
    }
  }

  isCircuitBreakerOpen(type) {
    const breaker = this.circuitBreakers.get(type);
    if (!breaker) return false;

    if (breaker.state === 'open') {
      // Check if we should try again
      const timeSinceLastFailure = Date.now() - breaker.lastFailure;
      if (timeSinceLastFailure > 60000) { // 1 minute
        breaker.state = 'half-open';
        return false;
      }
      return true;
    }

    return false;
  }

  getErrorContext() {
    return {
      url: window.location.href,
      userAgent: navigator.userAgent,
      viewport: {
        width: window.innerWidth,
        height: window.innerHeight
      },
      timestamp: Date.now()
    };
  }

  notifyErrorListeners(error) {
    this.errorListeners.forEach(listener => {
      try {
        listener(error);
      } catch (listenerError) {
        console.error('Error listener failed:', listenerError);
      }
    });
  }

  logError(error) {
    const logLevel = this.getLogLevel(error);
    const message = this.formatErrorMessage(error);

    switch (logLevel) {
      case 'error':
        console.error(message, error);
        break;
      case 'warn':
        console.warn(message, error);
        break;
      case 'info':
        console.info(message, error);
        break;
    }

    // Send to error tracking service
    this.sendToErrorService(error);
  }

  getLogLevel(error) {
    if (error.type === 'javascript' || error.type === 'dom-operation') {
      return 'error';
    }
    if (error.type === 'promise') {
      return 'warn';
    }
    return 'info';
  }

  formatErrorMessage(error) {
    return `[Popup DOM Error] ${error.type}: ${error.message}`;
  }

  sendToErrorService(error) {
    // Implementation for sending errors to external service
    if (typeof gtag !== 'undefined') {
      gtag('event', 'exception', {
        description: error.message,
        fatal: false
      });
    }
  }

  addErrorListener(listener) {
    this.errorListeners.push(listener);
  }

  removeErrorListener(listener) {
    this.errorListeners = this.errorListeners.filter(l => l !== listener);
  }

  configureRetry(type, config) {
    this.retryStrategies.set(type, {
      maxRetries: 3,
      delay: 1000,
      timeWindow: 30000,
      ...config
    });
  }

  getErrorStats() {
    const typeCounts = {};
    const recentErrors = this.getRecentErrors('all', 3600000); // Last hour

    recentErrors.forEach(error => {
      typeCounts[error.type] = (typeCounts[error.type] || 0) + 1;
    });

    return {
      totalErrors: this.errors.length,
      recentErrors: recentErrors.length,
      errorsByType: typeCounts,
      circuitBreakers: Array.from(this.circuitBreakers.entries()).map(([type, breaker]) => ({
        type,
        state: breaker.state,
        failures: breaker.failures,
        successes: breaker.successes
      }))
    };
  }

  clearErrors() {
    this.errors = [];
  }
}

Graceful Degradation Strategies

Implement fallback mechanisms for popup functionality:

• Feature detection: Test browser capabilities
• Progressive enhancement: Basic functionality first
• Fallback content: Alternative display methods
• Error recovery: Automatic retry mechanisms
• User notification: Graceful error messaging

Testing and Debugging

DOM Debugging Tools

Create debugging utilities for popup development:

class PopupDebugger {
  constructor() {
    this.isEnabled = false;
    this.debugPanel = null;
    this.metrics = {
      popupCount: 0,
      eventCount: 0,
      memoryUsage: 0,
      renderTime: []
    };
    this.eventLog = [];
    this.performanceMarks = new Map();
  }

  enable() {
    if (this.isEnabled) return;

    this.isEnabled = true;
    this.createDebugPanel();
    this.startMonitoring();
    console.log('Popup Debugger enabled');
  }

  disable() {
    if (!this.isEnabled) return;

    this.isEnabled = false;
    this.removeDebugPanel();
    this.stopMonitoring();
    console.log('Popup Debugger disabled');
  }

  createDebugPanel() {
    this.debugPanel = document.createElement('div');
    this.debugPanel.id = 'popup-debugger';
    this.debugPanel.innerHTML = `
      

      
Popup Debugger

      

        

          Active Popups:
          0
        
        

          Events Tracked:
          0
        
        

          Memory Usage:
          0 MB
        
        

          Avg Render Time:
          0 ms
        
      

      

        
Event log will appear here...
      

      

        Clear Log
        Export Data
        Run Tests
      
    `;

    document.body.appendChild(this.debugPanel);
    this.setupDebugListeners();
  }

  setupDebugListeners() {
    // Monitor popup events
    document.addEventListener('popup-open', (e) => {
      this.logEvent('popup-open', e.detail);
      this.updateMetrics();
    });

    document.addEventListener('popup-close', (e) => {
      this.logEvent('popup-close', e.detail);
      this.updateMetrics();
    });

    // Monitor DOM mutations
    const observer = new MutationObserver((mutations) => {
      mutations.forEach(mutation => {
        if (mutation.type === 'childList') {
          mutation.addedNodes.forEach(node => {
            if (node.nodeType === Node.ELEMENT_NODE &&
                (node.matches('.popup') || node.querySelector('.popup'))) {
              this.logEvent('popup-added', { element: node });
            }
          });

          mutation.removedNodes.forEach(node => {
            if (node.nodeType === Node.ELEMENT_NODE &&
                (node.matches('.popup') || node.querySelector('.popup'))) {
              this.logEvent('popup-removed', { element: node });
            }
          });
        }
      });
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true
    });

    this.mutationObserver = observer;
  }

  startMonitoring() {
    // Performance monitoring
    this.performanceMonitor = setInterval(() => {
      this.collectPerformanceMetrics();
      this.updateMetrics();
    }, 1000);

    // Memory monitoring
    this.memoryMonitor = setInterval(() => {
      if (performance.memory) {
        this.metrics.memoryUsage = performance.memory.usedJSHeapSize / 1024 / 1024;
        this.updateMetrics();
      }
    }, 5000);
  }

  stopMonitoring() {
    if (this.performanceMonitor) {
      clearInterval(this.performanceMonitor);
    }

    if (this.memoryMonitor) {
      clearInterval(this.memoryMonitor);
    }

    if (this.mutationObserver) {
      this.mutationObserver.disconnect();
    }
  }

  logEvent(type, data) {
    const logEntry = {
      type,
      timestamp: Date.now(),
      data: this.sanitizeData(data)
    };

    this.eventLog.push(logEntry);
    this.metrics.eventCount++;

    // Keep only last 100 events
    if (this.eventLog.length > 100) {
      this.eventLog.shift();
    }

    this.updateEventLog();
  }

  sanitizeData(data) {
    // Remove circular references and sensitive data
    try {
      return JSON.parse(JSON.stringify(data, (key, value) => {
        if (typeof value === 'function') return '[Function]';
        if (value instanceof Node) return '[Node]';
        if (value instanceof Window) return '[Window]';
        return value;
      }));
    } catch (e) {
      return '[Circular Reference]';
    }
  }

  updateMetrics() {
    if (!this.debugPanel) return;

    // Count active popups
    const activePopups = document.querySelectorAll('.popup:not([hidden])');
    this.metrics.popupCount = activePopups.length;

    // Update display
    document.getElementById('popup-count').textContent = this.metrics.popupCount;
    document.getElementById('event-count').textContent = this.metrics.eventCount;
    document.getElementById('memory-usage').textContent =
      `${this.metrics.memoryUsage.toFixed(2)} MB`;

    const avgRenderTime = this.metrics.renderTime.length > 0 ?
      this.metrics.renderTime.reduce((a, b) => a + b) / this.metrics.renderTime.length : 0;
    document.getElementById('render-time').textContent =
      `${avgRenderTime.toFixed(2)} ms`;
  }

  updateEventLog() {
    if (!this.debugPanel) return;

    const logContainer = document.getElementById('event-log');
    const logHTML = this.eventLog.slice(-20).map(entry => {
      const time = new Date(entry.timestamp).toLocaleTimeString();
      const dataStr = JSON.stringify(entry.data, null, 2);

      return `
        

          ${time} ${entry.type}
          
${dataStr}
        
      `;
    }).join('');

    logContainer.innerHTML = logHTML;
  }

  startPerformanceMark(name) {
    this.performanceMarks.set(name, performance.now());
  }

  endPerformanceMark(name) {
    const startTime = this.performanceMarks.get(name);
    if (startTime) {
      const duration = performance.now() - startTime;
      this.metrics.renderTime.push(duration);

      // Keep only last 50 measurements
      if (this.metrics.renderTime.length > 50) {
        this.metrics.renderTime.shift();
      }

      this.performanceMarks.delete(name);
      return duration;
    }
  }

  clearLog() {
    this.eventLog = [];
    this.metrics.eventCount = 0;
    this.updateEventLog();
    this.updateMetrics();
  }

  exportData() {
    const exportData = {
      metrics: this.metrics,
      eventLog: this.eventLog,
      timestamp: Date.now(),
      userAgent: navigator.userAgent,
      url: window.location.href
    };

    const blob = new Blob([JSON.stringify(exportData, null, 2)],
      { type: 'application/json' });
    const url = URL.createObjectURL(blob);

    const a = document.createElement('a');
    a.href = url;
    a.download = `popup-debug-${Date.now()}.json`;
    a.click();

    URL.revokeObjectURL(url);
  }

  runTests() {
    console.log('Running popup diagnostics...');

    // Test popup functionality
    const testResults = {
      popupsFound: document.querySelectorAll('.popup').length,
      activePopups: document.querySelectorAll('.popup:not([hidden])').length,
      eventListenersAttached: this.checkEventListeners(),
      memoryLeaks: this.checkMemoryLeaks(),
      performanceIssues: this.checkPerformance()
    };

    console.log('Diagnostic Results:', testResults);
    this.logEvent('diagnostic-test', testResults);
  }

  checkEventListeners() {
    // Simple check for common popup event listeners
    const popups = document.querySelectorAll('.popup');
    let listenersFound = 0;

    popups.forEach(popup => {
      if (popup.onclick || popup.onkeydown) listenersFound++;
    });

    return listenersFound;
  }

  checkMemoryLeaks() {
    // Basic memory leak detection
    if (!performance.memory) return 'Not available';

    const memory = performance.memory;
    const usedHeap = memory.usedJSHeapSize;
    const totalHeap = memory.totalJSHeapSize;

    return {
      used: `${(usedHeap / 1024 / 1024).toFixed(2)} MB`,
      total: `${(totalHeap / 1024 / 1024).toFixed(2)} MB`,
      percentage: `${((usedHeap / totalHeap) * 100).toFixed(1)}%`
    };
  }

  checkPerformance() {
    const renderTimes = this.metrics.renderTime;
    if (renderTimes.length === 0) return 'No data';

    const avg = renderTimes.reduce((a, b) => a + b) / renderTimes.length;
    const max = Math.max(...renderTimes);

    return {
      average: `${avg.toFixed(2)} ms`,
      maximum: `${max.toFixed(2)} ms`,
      samples: renderTimes.length
    };
  }

  removeDebugPanel() {
    if (this.debugPanel) {
      this.debugPanel.remove();
      this.debugPanel = null;
    }
  }
}

// Global instance for easy access
window.popupDebugger = new PopupDebugger();

Automated Testing Framework

Create testing utilities for popup functionality:

• Unit tests: Individual component testing
• Integration tests: Component interaction testing
• Visual regression tests: UI consistency verification
• Performance tests: Load and stress testing
• Accessibility tests: WCAG compliance validation

Best Practices and Guidelines

Performance Optimization Guidelines

Follow these practices for optimal popup performance:

• Minimize DOM operations: Batch DOM changes together
• Use efficient selectors: Optimize CSS selector performance
• Implement lazy loading: Load content only when needed
• Optimize animations: Use hardware-accelerated properties
• Monitor memory usage: Prevent memory leaks
• Cache frequently accessed elements: Reduce DOM queries
• Use event delegation: Minimize event listeners
• Implement virtual scrolling: Handle large content lists

Security Considerations

Implement robust security measures for popup content:

• Input sanitization: Clean all user inputs
• XSS prevention: Escape dynamic content
• Content Security Policy: Implement proper CSP headers
• Same-origin enforcement: Validate content sources
• Authentication checks: Verify user permissions

Accessibility Standards

Ensure popups are accessible to all users:

• ARIA attributes: Proper semantic markup
• Keyboard navigation: Full keyboard support
• Screen reader support: Proper announcements
• Focus management: Logical focus progression
• Color contrast: Meet WCAG standards
• Reduced motion: Respect user preferences

Conclusion

Advanced DOM manipulation for dynamic popups represents a sophisticated intersection of JavaScript engineering, performance optimization, and user experience design. The techniques and patterns explored in this guide provide a comprehensive foundation for building popup systems that are not only functional and performant but also maintainable and scalable.

Mastering these advanced DOM manipulation techniques requires continuous learning and experimentation. The web platform is constantly evolving, with new APIs and performance improvements being introduced regularly. Stay current with emerging technologies, monitor your popup performance metrics, and always prioritize the user experience. The most successful popup implementations are those that seamlessly integrate with the user's workflow while maintaining technical excellence.

Next Steps: Begin implementing these advanced techniques in your projects, starting with the foundational patterns like event delegation and virtual DOM concepts. Gradually incorporate more sophisticated features like gesture recognition and performance monitoring as your requirements grow. Remember that the goal is not just to create popups that work, but to create popup systems that delight users and perform flawlessly across all devices and conditions.