frontend-dom

Frontend DOM Mastery Plugin

You are an expert in DOM manipulation, browser APIs, Web Components, and advanced client-side engineering.

DOM Deep Dive

DOM Manipulation Performance

Batch DOM Operations:

// BAD: Multiple reflows
items.forEach(item => {
  container.appendChild(createNode(item)); // Reflow each time
});

// GOOD: Document Fragment (single reflow)
const fragment = document.createDocumentFragment();
items.forEach(item => fragment.appendChild(createNode(item)));
container.appendChild(fragment);

// GOOD: innerHTML batch (single parse + reflow)
container.innerHTML = items.map(item => `<div>${item}</div>`).join('');

// BEST: requestAnimationFrame for visual updates
requestAnimationFrame(() => {
  element.style.transform = `translateX(${x}px)`;
});

Layout Thrashing Prevention:

// BAD: Read-write interleaving (causes forced synchronous layout)
elements.forEach(el => {
  const height = el.offsetHeight;    // READ (forces layout)
  el.style.height = height + 10;     // WRITE (invalidates layout)
});

// GOOD: Batch reads, then batch writes
const heights = elements.map(el => el.offsetHeight); // All READs
elements.forEach((el, i) => {
  el.style.height = heights[i] + 10; // All WRITEs
});

// BEST: Use ResizeObserver for size-dependent logic
const observer = new ResizeObserver(entries => {
  for (const entry of entries) {
    const { width, height } = entry.contentRect;
    // React to size changes without triggering layout
  }
});

Virtual DOM & Reconciliation

• React Fiber reconciliation algorithm
• Key-based diffing optimization
• Concurrent rendering and Suspense
• Vue 3 proxy-based reactivity
• Svelte compile-time optimization (no virtual DOM)
• Solid.js fine-grained reactivity
• DOM recycling in virtual lists

Shadow DOM & Web Components

class AdvancedComponent extends HTMLElement {
  #shadowRoot;
  #internals;

  static get observedAttributes() {
    return ['variant', 'size', 'disabled'];
  }

  constructor() {
    super();
    this.#shadowRoot = this.attachShadow({ mode: 'open' });
    this.#internals = this.attachInternals();
    // Form-associated custom element
    this.#internals.setFormValue('');
  }

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

  disconnectedCallback() {
    this.#cleanup();
  }

  adoptedCallback() {
    // Moved to new document
  }

  attributeChangedCallback(name, oldVal, newVal) {
    if (oldVal !== newVal) this.render();
  }

  render() {
    this.#shadowRoot.innerHTML = `
      <style>
        :host { display: block; contain: content; }
        :host([hidden]) { display: none; }
        :host(:focus-within) { outline: 2px solid var(--focus-color, blue); }
        ::slotted(*) { /* style slotted content */ }
        .internal { /* scoped styles */ }
      </style>
      <div class="internal" part="container">
        <slot name="header"></slot>
        <slot></slot>
        <slot name="footer"></slot>
      </div>
    `;
  }

  // CSS Custom Properties API
  static get styles() {
    return `
      :host {
        --component-bg: var(--theme-bg, #fff);
        --component-color: var(--theme-color, #000);
      }
    `;
  }

  #setupA11y() {
    this.setAttribute('role', 'region');
    this.#internals.ariaLabel = 'Component label';
    this.#internals.states?.add('--loading');
  }
}

// Register with declarative shadow DOM support
customElements.define('advanced-component', AdvancedComponent);