Existing DOM Enhancement

DOMPP can enhance existing server-rendered or static HTML without recreating the DOM tree.

Unlike setChildren(), setEnhancement() adopts the existing DOM structure and attaches behavior directly onto it.

Important

setEnhancement() does not rerender or replace the existing DOM tree.

When state changes, the enhancement callback reruns and directly executes native DOM setters again.

Mutation granularity depends entirely on which setters are called.

Examples: DOMPP does not use virtual DOM diffing or hidden reconciliation systems.

Enhancement Pattern 

// =====================================
// EXISTING DOM ENHANCEMENT
// =====================================
document
  .getElementById(
    "counter-app"
  )

  // ===================================
  // LOCAL STATE
  // ===================================
  .setState({
    count: 0
  })

  // ===================================
  // ENHANCE EXISTING DOM
  // ===================================
  .setEnhancement(({ 
    childNodes,
    state,
    setState
  }) => {
    // =================================
    // EXISTING NODES
    // =================================
    const count =
      childNodes[1];
    const controls =
      childNodes[3];
    const increment =
      controls.childNodes[1];
    const decrement =
      controls.childNodes[3];

    // =================================
    // REACTIVE COUNT
    // =================================
    count
      .setText(
        state.count
      )
      .setStyles({
        color:
          state.count > 0
            ? "limegreen"
            : state.count < 0
              ? "tomato"
              : "#222"
      });

    // =================================
    // INCREMENT
    // =================================
    increment
      .setEvents({
        click() {
          setState({
            count:
              state.count + 1
          });
        }
      });

    // =================================
    // DECREMENT
    // =================================
    decrement
      .setEvents({
        click() {
          setState({
            count:
              state.count - 1
          });
        }
      });
  });
Notes
  • existing DOM nodes are reused directly
  • enhancement attaches behavior without replacing the tree
  • ideal for SSR, static HTML, and progressive enhancement
  • DOMPP enhancement behaves like DOM assimilation rather than rerendering

Live Preview

0