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.

Those attributes are runtime contracts for data flow, events, API calls, state placement, and rendering behavior. Sercrod applies the explicit contracts declared in HTML; it does not infer or invent the application architecture.

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.

• AI runtime rules - compact rules that prevent wrong assumptions before editing Sercrod-related code.
• AI directives reference - directive meanings, status labels, risk notes, and safe-edit guidance for AI-assisted work.

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? - capability adapters connect files, navigation, camera, clipboard, playback, microphone capture, foreground geolocation, network status, screen/viewport state, screen wake lock, haptics, sharing, local notifications, background notification checks, remote push registration, barcode scanning, and upload.
• Which notification route should an app use? - use FCM/APNs as the standard route; delayed Background Runner checks and Android self-hosted foreground-service realtime are alternatives.
• How does the complete push workflow fit together? - permission, application-wide registration, browser/Capacitor setup, Node/PHP server handoff, foreground watches, and unregister.
• Can I test push through an application server? - register with the Node.js sample, select the masked device in its admin page, and send through FCM.

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 - direct capability adapters including geolocation, network status, screen/viewport state, screen wake lock, haptics, sharing, local notifications, background notification checks, remote push registration, barcode scanning, upload, Capacitor app manifests, 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.