Nested Stateful Elements

DOM++ allows stateful elements to exist inside other stateful elements.

This example demonstrates how nested runtime ownership behaves when parent and child state mutate independently.

Important

State in DOM++ is attached directly to DOM elements.

Nested stateful elements maintain isolated local state ownership.

Child state survives parent updates as long as the child DOM node itself is preserved.

Nested State Pattern 

// =====================================
// CHILD ELEMENT
// =====================================
function createChildCounter() {
  return document
    .createElement("div")
    .setState({
      count: 0
    })
    .setChildren(({
      state,
      setState
    }) => [
      document
        .createElement("h3")
        .setText(
          `Child Count: ${state.count}`
        ),
      document
        .createElement("button")
        .setText(
          "Increment Child"
        )
        .setEvents({
          click() {
            setState({
              count:
                state.count + 1
            });
          }
        })
    ]);
}

const child =
  createChildCounter();

// =====================================
// PARENT ELEMENT
// =====================================
const parent =
  document
    .createElement("div")
    .setState({
      count: 0
    })
    .setChildren(({
      state,
      setState
    }) => [
      document
        .createElement("h2")
        .setText(
          `Parent Count: ${state.count}`
        ),
      child
    ]);
Notes
  • child state is attached directly to the child DOM node
  • parent rerenders reuse the same child reference
  • child state survives parent updates
  • replacing the child element entirely resets child state

Live Preview