Cross Element State

State is attached directly to DOM elements.

Any other element can mutate that state through normal JavaScript references.

This allows DOMPP state to remain: explicit, composable, and framework-independent.

Important

DOMPP state is local to the element.

However, because elements remain native JavaScript objects, other elements can mutate state directly through references.

This avoids hidden stores, context systems, or centralized reactive containers.

Composition happens through normal JavaScript object references.

Cross Mutation Pattern 

// =====================================
// COUNTER ELEMENT
// =====================================
const counter =
  document
    .createElement("div")
    .setAttributes({
      class: "card"
    })
    .setState({
      count: 0
    })
    .setChildren(({ state }) => [
      document
        .createElement("div")
        .setAttributes({
          class: "count"
        })
        .setText(
          `${state.count}`
        )
    ]);

// =====================================
// EXTERNAL CONTROLS
// =====================================
const controls =
  document
    .createElement("div")
    .setAttributes({
      class: "row"
    })
    .setChildren(
      document
        .createElement("button")
        .setText("+1")
        .setEvents({
          click() {
            counter.setState(
              ({ state }) => {
                state.count += 1;
              }
            );
          }
        }),
      document
        .createElement("button")
        .setText("-1")
        .setEvents({
          click() {
            counter.setState(
              ({ state }) => {
                state.count -= 1;
              }
            );
          }
        }),
      document
        .createElement("button")
        .setText("Reset")
        .setEvents({
          click() {
            counter.setState({
              count: 0
            });
          }
        })
    );

// =====================================
// APP
// =====================================
app
  .setChildren(
    counter,
    controls
  );
Notes
  • state remains attached directly to the DOM element
  • other elements can mutate state through normal references
  • no centralized store is required
  • composition stays aligned with standard JavaScript patterns

Live Preview