*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`, use: `item.type`, from: `content-template` }"
    *iterate="place">
  </template>

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

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

    <section class="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.
• use: expression evaluated per item. Its result selects the candidate.
• from: 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.

from 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 use result with the class names of those direct children:

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

If use evaluates to "content-a", the direct child with class 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 class="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.

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 class names, invalid place objects, and non-template anchors warn with [Sercrod warn] and continue where possible.