Defining and filling METAL slots

metal:define-slot

Attribute syntax

metal:define-slot="SLOTNAME"

Remarks

Only valid when defined on a child element of an element decorated with metal:define-macro or when decorating a child element of an element decorated fill-slot, within an element decorated metal:extend-macro. Indicates that the element and its children constitute a named extension point for the current macro. The slot uses the given name (SLOTNAME).

metal:fill-slot

Attribute syntax

metal:fill-slot="SLOTNAME"

Remarks

Only valid when defined on a child element of an element decorated with metal:use-macro or metal:extend-macro. When the use-macro element is replaced with the macro, the referenced macro is searched for a slot (indicated by define-slot) with a name matching SLOTNAME. If a matching slot is found then the define-slot element (and its children) is replaced with the fill-slot element and its children.

Slot-filling example

The following example shows a macro which represents an <article> element. It provides a standard markup structure, including an actions menu. The markup for the heading and content are supplied from the location at which the macro is used, using slots.

<!-- Macro definition -->
<article metal:define-macro="article_template">
  <header>
    <h2 metal:define-slot="article_title">Title goes here</h2>
  </header>
  <p metal:define-slot="article_content">Article content goes here</p>
  <ul class="article_actions">
    <li><a href="upvote_url">Upvote</a></li>
    <li><a href="downvote_url">Downvote</a></li>
    <li><a href="share_url">Share</a></li>
    <li><a href="report_url">Report</a></li>
  </ul>
</article>

<!-- Macro usage -->
<article metal:use-macro="article_template">
  <h2 metal:fill-slot="article_title">Filling slots</h2>
  <p metal:fill-slot="article_content">
    The slot filler content can include <strong>markup</strong> and
    TAL statements.
  </p>
</article>

<!-- How this renders -->
<article>
  <header>
    <h2>Filling slots</h2>
  </header>
  <p>
    The slot filler content can include <strong>markup</strong> and
    TAL statements.
  </p>
  <ul class="article_actions">
    <li><a href="upvote_url">Upvote</a></li>
    <li><a href="downvote_url">Downvote</a></li>
    <li><a href="share_url">Share</a></li>
    <li><a href="report_url">Report</a></li>
  </ul>
</article>