Pass-through Directives

Pass-through directives look like normal directives, but they are handled by specialized compiler passes instead of the directive compilation pass.

Directives

• s:slot - Component slot assignment.
• s:bind - Component attribute binding.
• s:raw - Preserve element inner content without directive parsing.

Examples

s:slot

Assign element content to a named component slot.

Named slot

<s-card>
    <div s:slot="header">Title</div>
    <p>Body</p>
</s-card>

Multiple slots

<s-layout>
    <div s:slot="sidebar">Filters</div>
    <div s:slot="content">Results</div>
</s-layout>

s:bind

Bind a set of attributes or props to a component element.

Props object

<s-card s:bind="$cardProps"></s-card>

Merge attributes

<s-button s:bind="$buttonAttrs">Save</s-button>

s:raw

Use s:raw when you need verbatim inner content. Sugar skips parsing directives and special tags inside the node body.

s:raw is supported on attribute-bearing template nodes (elements, fragments, and components).

<code s:raw>
    <s-template s:if="$debug">literal</s-template>
    {{ untouched_token }}
</code>

Notes:

• s:raw applies to children, not to the outer node itself.
• The s:raw attribute is not rendered in final HTML.