Host API

A Sercrod host is a custom element. It exposes a small public surface: data, lifecycle helpers such as update(), and environment-specific helper objects when directives create them.

`el.data`

Reading el.data returns the host data object used by expressions and bindings.
Assigning el.data = next replaces the whole data object and schedules an update.
Assigning the whole property is a Sercrod-owned update entry point.
Direct property mutations made from outside the host can change the object without forcing an immediate render. Use el.update() after such external mutations, or assign a new object to el.data.

`el.ready`

ready is a JavaScript-only host property. It starts as false, becomes true after the host's first completed update() cycle, and stays true for that host instance.

It is not Sercrod data. It is not copied into el.data, does not create a %ready% template value, and is not controlled by a ready attribute.

It belongs to Sercrod's own update lifecycle. It does not wait for child Web Components, images, fonts, network requests, or other asynchronous rendering outside that update.

const host = document.querySelector('serc-rod');

host.addEventListener('sercrod-ready', (event) => {
  console.log(event.detail.host.ready);
});

`el.update(force = true)`

update() schedules a render pass for the host. Multiple calls in the same animation frame are coalesced.

Cross-host data access

A Sercrod host is also a DOM element. Code evaluated inside a Sercrod event handler can use ordinary DOM APIs to find another host and then read or replace that host's data.

This is ordinary JavaScript evaluated by Sercrod. It is not special Sercrod syntax. The Sercrod-specific part is the host API: panel.data, panel.data = next, and panel.update().

Event attributes such as @click are processed only inside a <serc-rod> host. A button outside every host is ordinary HTML and its @click attribute is not wired by Sercrod.

Replace another host's data

<serc-rod id="panel" data='{"title":"Panel A","count":3}'>
  <p>%title%: %count%</p>
</serc-rod>

<serc-rod>
  <button @click="
    const panel = document.querySelector('#panel');

    panel.data = {
      title: 'Panel B',
      count: 0
    };
  ">
    Reset panel
  </button>
</serc-rod>

document.querySelector('#panel') is the browser DOM API.
panel.data = { ... } uses the Sercrod host data setter.
The controller button is inside its own <serc-rod>, so Sercrod processes its @click.

Read another host's data

<serc-rod id="panel" data='{"title":"Panel A","count":3}'>
  <p>%title%: %count%</p>
</serc-rod>

<serc-rod data='{"label":""}'>
  <button @click="
    const panel = document.querySelector('#panel');
    label = panel.data.title;
  ">
    Read title
  </button>

  <p>Selected: %label%</p>
</serc-rod>

panel.data.title is ordinary JavaScript property access.
label = ... writes to the current controller host's data scope.
After the handler runs, the controller host updates and displays the copied value.

Change part and replace the whole object

This version uses ordinary assignments instead of object spread.

<serc-rod id="panel" data='{"title":"Panel A","count":3}'>
  <p>%title%: %count%</p>
</serc-rod>

<serc-rod>
  <button @click="
    const panel = document.querySelector('#panel');

    const next = {};
    next.title = panel.data.title;
    next.count = panel.data.count + 1;

    panel.data = next;
  ">
    Increment panel
  </button>
</serc-rod>

const next = {}; creates a new plain JavaScript object.
next.title = panel.data.title; copies the existing title.
next.count = panel.data.count + 1; computes the next count.
panel.data = next; replaces the other host's data through the Sercrod data setter, so the other host updates.

Object spread version

const next = {
  ...panel.data,
  count: panel.data.count + 1
};

panel.data = next;

{ ...panel.data, ... } is JavaScript object spread. It makes a shallow copy of enumerable properties from panel.data.
count: panel.data.count + 1 is a normal object property definition. Because it appears after ...panel.data, it overwrites the copied count.
This is not Sercrod syntax. It is ordinary JavaScript running inside Sercrod's evaluated event expression.
panel.data = next is the Sercrod host API call that replaces the data and schedules the update.

Object spread copies enumerable properties. If you only need a few application fields, select those fields explicitly instead of spreading the whole Sercrod data object. That avoids copying transient runtime fields such as $upload or $download.

Direct mutation and manual update

const panel = document.querySelector('#panel');

panel.data.count = panel.data.count + 1;
panel.update();

Use this when you intentionally want in-place mutation. For most cross-host edits, replacing panel.data with a new object is clearer because the assignment itself schedules the other host's update.

Attribute replacement

const panel = document.querySelector('#panel');

const next = {};
next.title = panel.data.title;
next.count = panel.data.count + 1;

panel.setAttribute('data', JSON.stringify(next));

This uses the normal DOM attribute API. Sercrod observes the data attribute, parses the JSON value, replaces host data, and updates the host. Keep the object JSON-safe and include only the fields you actually want to store.

Runtime events

sercrod-ready is dispatched once after the first completed update() cycle.
The event detail includes host, ready: true, and initial: true.
Use *updated for template lifecycle code and *update for target host propagation.