Slot ViewHelper <f:slot>
f:slot allows a template that is called as a component to access and render
the child content of the calling component tag. This makes nesting of components
possible.
Most importantly, the f:slot ViewHelper makes sure that the right level of
HTML escaping happens automatically, in line with the escaping in other parts of
Fluid: If HTML is used directly, it is not escaped. However, if a variable is
used within the child content that contains a HTML string, that HTML is escaped
because it might be from an unknown source.
If a slot is defined, this ViewHelper will always attempt to return a string,
regardless of the original type of the content. If a slot is not defined, the
ViewHelper will return null.
Basic Example
If the following template Text.html:
<f:argument name="title" type="string" />
<div class="textComponent">
<h2>{title}</h2>
<div class="textComponent__content">
<f:slot />
</div>
</div>is rendered with the following component call:
<my:text title="My title">
<p>My first paragraph</p>
<p>My second paragraph</p>
</my:text>it will result in the following output:
<div class="textComponent">
<h2>My title</h2>
<div class="textComponent__content">
<p>My first paragraph</p>
<p>My second paragraph</p>
</div>
</div>Escaping Example
If the same component is called like this:
<f:variable name="htmlString">
<p>My first paragraph</p>
<p>My second paragraph</p>
</f:variable>
<my:text title="My title">{htmlString}</my:text>it would result in escaped HTML:
<div class="textComponent">
<h2>My title</h2>
<div class="textComponent__content">
<p>My first paragraph</p>
<p>My second paragraph</p>
</div>
</div>If you want to avoid escaping in this use case, you need to use f:format.raw on
the variable when it's passed to the component. Please be aware that depending on
the source of the input, this might have security implications!
Component Nesting Example
Nesting of multiple components is possible. The following template Paragraphs.html:
<p>My first paragraph</p>
<p>My second paragraph</p>can be called as a component and nested into the text component described above:
<my:text title="My title">
<my:paragraphs />
</my:text>which would lead to unescaped output, since components are always expected to return HTML:
<div class="textComponent">
<h2>My title</h2>
<div class="textComponent__content">
<p>My first paragraph</p>
<p>My second paragraph</p>
</div>
</div>Go to the source code of this ViewHelper: SlotViewHelper.php (GitHub).