Use the hello component in Build a first site as the verified minimal component shape. A new site-owned component has a directory under .web/components/<name>/ with a manifest and renderer; beta.25’s verified starter also includes a stylesheet.
Add it as a contract, not an HTML fragment
- Choose a stable component name based on reader purpose, such as
article-card. - Declare the props that a page may pass in
manifest.json. - Implement
render(ctx)usingprops,slots,t(),locale, and escaping helpers as appropriate. - Add styling at the component level and an explicit empty state for optional values.
- Reference the component in one page layout with declared props, then run the full local chain.
If a same-named component already comes from the runtime/theme, an overlay can replace only one file and inherit the rest. If the name is new, it needs a complete definition; a lone style.css does not create a component.
Do not call render.js a sandbox. It is trusted site code. Do not claim hot reload as a correctness guarantee; reload and inspect a rendered page after an edit.
For precedence and rendering context, read Use and override components.