*iterate

*iterate="place" declares a host-owned placement region. It reads a data array and keeps the children in that region synchronized with the array without clearing and rebuilding the parent host.

The initial supported form is a native <template> anchor.

<serc-rod id="contents" *dominate data="contents_data">
  <template
    *let="place = { list: `items`, as: `item`, unit: `item.type`, template: `content-template` }"
    *iterate="place">
  </template>

  <div *template="'content-template'">
    <section *unit="'content-a'">%item.title%</section>

    <serc-rod *unit="'content-b'" data="item">
      <p>%title%</p>
      <button @click="count++">%count%</button>
    </serc-rod>

    <section *unit="'content-c'">%item.title%</section>
  </div>
</serc-rod>

place

place must be an object with these fields:

• list: array name or path in the current host data.
• as: local variable name for the current item.
• unit: expression evaluated per item. Its result is matched against the *unit value of each candidate in the template source.
• template: Sercrod *template registered template source name.

For each item, Sercrod evaluates use in a scope that includes the parent host data and the local name from as.

template names a Sercrod *template registered template source, not a DOM id. Hyphenated names should be written as string expressions, for example *template="'content-template'".

Registered template source

The template source is registered from the same host before placement sync. Only direct child elements of the registered template source are candidates; grandchildren are not candidates.

Candidate selection compares the evaluated unit result with the *unit value of those direct children:

<div *template="'content-template'">
  <section *unit="'content-a'">%item.title%</section>
  <section *unit="'content-c'">%item.title%</section>
</div>

If unit evaluates to "content-a", the direct child with *unit="'content-a'" is cloned and rendered for that item.

Scope

Normal candidate elements use the parent host scope plus the local item variable:

<section class="content-a">%item.title%</section>

A child <serc-rod> without data receives the same local scope for its initial render.

A child <serc-rod data="item"> is handled by the parent placement logic: the parent evaluates item in the local scope, passes that object as the child host data root, and prevents the child from parsing data="item" in the global scope.

<serc-rod class="content-b" data="item">
  <p>%title%</p>
  <button @click="count++">%count%</button>
</serc-rod>

Inside that child host, %title% and %count% refer to the item object.

Staged item editing

A data-less child <serc-rod *stage> inside an iterate candidate can stage the current object item without making that item the child host's data root.

<div *template="'content-template'">
  <serc-rod *unit="'content-b'" *stage>
    <input *input="item.title">
    <p>%item.title%</p>

    <button type="button" *apply>Apply</button>
    <button type="button" *restore>Restore</button>
  </serc-rod>
</div>

This rule is narrow:

• The child host must have no data attribute.
• *stage must be empty; *stage values are not evaluated as item selectors.
• The child must be produced from a *iterate="place" object item.
• The current item variable named by place.as points to the staged item inside the child host.
• *apply merges the staged item back into the original item object.
• *restore resets only that staged item.
• Primitive items such as strings and numbers are not supported for staged item editing and warn.

Use <serc-rod data="item"> when the child should be an independent item-root host. Use data-less <serc-rod *stage> when the child should keep the inherited iterate scope while editing the current object item in a confirmable staged buffer.

Do not mix the two child-scope shapes:

• In <serc-rod data="item">, the child data root is the item itself. Use *input="title", not *input="item.title".
• In data-less <serc-rod *stage>, the inherited iterate name remains available, and the item name points at the staged item. Use *input="item.title" when place.as is item.

For editable item rows that should be visible, reviewable, and commit/restore capable, prefer an empty *stage on the data-less child and apply the staged item with *apply.

Identity and placement

*iterate="place" is not a faster *for. *for repeats one template from scratch during rendering. *iterate="place" owns a placement region and keeps item-to-DOM records for the current browser run.

• Array order is the source of truth.
• id, key, and *keys are not used.
• The same item object keeps its DOM record when moved.
• A new item object is treated as a new item.
• A changed use result replaces that item with another candidate.
• Removed items are cleaned up through the normal Sercrod removal path.

With *dominate

With *dominate, the parent host does not clear and rebuild its template during ordinary automatic updates, but registered iterate regions still synchronize. The older *dominant spelling remains available as an alias.

This allows large parent hosts to remain stable while item children are added, removed, moved, replaced, or locally updated.

Warnings

Missing template sources, missing candidates, duplicate candidate *unit values, invalid place objects, and non-template anchors warn with [Sercrod warn] and continue where possible.