Components, props, and children
Components are named HTML fragments. They share the runtime scope and receive explicit props. Use them for buttons, cards, and repeated rows.
Define and call a component
<template data-1c-template="action-button">
<button type="button" class="brand-button brand-button--{{ props.variant }}" data-1c="{{ props.action }}">
{{ props.label }}
</button>
</template>
<template data-1c-use="action-button" data-1c-variant="primary"
data-1c-action="command:acceptAll" data-1c-label="ui.button.acceptAll"></template>In a reusable file named action-button.1cl.html, save only its inner button markup: the design compiler wraps partials automatically. Inline definitions, as above, include their wrapper and belong at the top level.
Prop rules
| Caller attribute | Component prop | Meaning |
|---|---|---|
data-1c-label="ui.title" | props.label | Path binding |
data-1c-label="{{ category.name }}" | props.label | Explicit whole-value binding |
data-1c-variant="primary" | props.variant | Literal string |
data-1c-visible="false" | props.visible | Boolean false |
data-1c-is-switch="true" | props.isSwitch | Kebab-case becomes camelCase |
data-1c="consent:gdpr.category" | props.binding | Special binding prop |
data-1c-id="{{ category.id }}" | props.id | Controlled input identity |
Dots/colons imply paths except action prefixes command:, view:, consent:, and dataset:. Single words are strings. Use explicit whole-value bindings for root values or loop items. A literal sentence or URL containing dots would be read as a path: put it in localized/configuration data and bind it. Props are not a general string-interpolation API; mixed ordinary HTML attributes are a separate feature.
Children use caller scope
<template data-1c-template="category-card">
<section class="brand-card">
<h3>{{ props.title }}</h3>
<div>{{ children }}</div>
</section>
</template>
[[each category in categories]]
<template data-1c-use="category-card" data-1c-title="{{ category.name }}">
<p>{{ category.description }}</p>
</template>
[/each]The heading uses props.title; children still resolve category.description in the caller's loop. One children placeholder is allowed per component. Providing children without a placeholder is a compile error; omitted children render nothing. Avoid recursive component calls.
Shared files and overrides
Collection files provide defaults. A design-local partial with the same name replaces the shared counterpart. Use unique names for isolated changes: editing a shared button changes every consumer when previewed or republished. A reusable visual button can be shared, while each consent toggle's binding and identity must match the legal framework.