Sercrod Reference

This section collects the precise rules for Sercrod's attribute conveyor model. Sercrod does not take over the page. It connects HTML attributes to browser-native behavior, Web Components lifecycle, JSON data, external helpers, and build tools.

If you are evaluating Sercrod's design, read the coexistence and runtime contract pages first. They explain why Sercrod can be embedded without competing for ownership of the whole page.

Start here

1. Coexistence by design - Custom Element boundaries, delegated browser behavior, separated responsibilities, and JSON data assets.
2. Runtime specification - the browser-side attribute processing contract for hosts, data, rendering, directives, events, and network behavior.
3. Shadow DOM bridge - connecting visible shadow templates to Light DOM usage while leaving slots and CSS scoping to the browser.
4. How Sercrod works - practical data flow, input timing, clickable actions, event updates, expression scope, AST hooks, and server response contracts.
5. Nested Sercrod - the practical guide for parent/child host boundaries, shared state, and AI-readable page structure.

AI-readable manual

Before generating, editing, debugging, or explaining Sercrod templates, read man.json. Start with __ai_policy, __ai_runtime_guide, __ai_confusion_guards, __debug, and the detailed directive entry for each attribute you touch.

Common implementation questions

• How do events update data? - event attributes run ordinary JavaScript in the current host scope.
• How do hosts share or exchange data? - host data can be read, replaced, or updated through the host API. For template-level parent/child patterns, see Nested Sercrod.
• How does a child refresh a parent? - *update routes a forced update to a target Sercrod host.
• How does Sercrod connect to platform APIs? - adapters keep the core runtime small while external environments provide storage and build behavior.

Directives

Directives are attributes that declare where behavior is connected. They are written with a leading asterisk or special prefix, for example *let, *for, *input, @click, or :class.

• Directives overview - list of all directives with short descriptions.
• All directives - list of all directive pages.
• Data and interpolation - *let, *print, interpolation with %name%.
• Conditions and loops - *if, *elseif, *else, *for.
• Events and input - @event, *input, basic event scope.
• Keyboard events - key modifiers, combinations such as arrowup+shift, and .window keyboard actions.
• Lifecycle helpers - file/session/store save-load forms, *fetch, *post, and related helpers.

Configuration and runtime

• Config - global settings such as cleanup, delimiters, and event prefixes.
• Runtime behavior - host discovery, data parsing, template rendering, and update flow.
• Host API - host data, update(), and cross-host data access patterns.
• Runtime specification - the attribute processing contract used by implementation, documentation, and tests.
• Adapters - registry, file adapters, Capacitor filesystem integration, and the Playwright SSG bridge.

Using Sercrod with other tools

• Coexistence by design - why Sercrod stays inside Custom Element boundaries and delegates behavior.
• SSG and SSR - notes for static site generation and server-side rendering.
• Adapters - connecting Sercrod runtime roles to external environments.
• Integration notes - using Sercrod in existing sites and generated content.
• Build environment - Node and Playwright renderer setup.