` with formatting to act as a flex container for responsive sizing. You use this component repeatedly across your project, and it's effectively a macro to open and close the `
`; it doesn't have any slots or do anything special itself otherwise, with only a default `
` to render whatever it is given.
+```html x-container.view.php
+
+```
+Now, assume we have an `x-header` in which we wish to use the `x-container`. Our `x-header` wishes to place slots `left` and `right` inside it; `x-header` owns these slots and wishes to expose these slots at the callsite in case they need custom content. Using the `define` keyword tells Tempest to treat these slots as *defined* by `x-header` instead of as a *slot to fill* inside `x-container`. Using `name` here instead of `define` would mean that Tempest falls back to the AST, and treats them as if they are slots of `
`.
+```html x-header.view.php
+
+
+
+
+
+
+
+ I am in the center
+
+
+
+
+
+
+
+```
+At the callsite, you still use the `name` attribute to define which slot you're placing content into:
+```html callsite.view.php
+
+ Some content I want to insert
+
+```
+This example would replace the default content `` instead with the literal string `Some content I want to insert` - or whatever you provide.
+
+#### Populating a child's name slot using `define`
+
+You can also push content into a child's named slot, not just the default slot, by creating a `define`d slot as follows:
+```html x-outer.view.php
+
+
+
+ default-left-content
+
+
+
+```
+Again, the `define` keyword registers a `left` slot against the view component `` irrespective of it's position in the AST, and means that at the callsite:
+```html outercallsite.view.php
+
+ My override
+
+```
+And so, this places the literal string `My override` into ``'s `left` slot.
+
### Dynamic view components
On some occasions, you might want to dynamically render view components, for example, render a view component whose name is determined at runtime. You can use the `{html}` element to do so:
diff --git a/packages/view/src/Elements/ViewComponentElement.php b/packages/view/src/Elements/ViewComponentElement.php
index 5462e5c45..64b25754f 100644
--- a/packages/view/src/Elements/ViewComponentElement.php
+++ b/packages/view/src/Elements/ViewComponentElement.php
@@ -282,6 +282,12 @@ private function compileSlotToken(Token $slotToken): string
private function resolveSlotName(Token $slotToken): string
{
+ $define = $slotToken->getAttribute('define');
+
+ if ($define !== null && $define !== '') {
+ return $define;
+ }
+
$name = $slotToken->getAttribute('name');
if ($name !== null && $name !== '') {
diff --git a/tests/Integration/View/ViewComponentTest.php b/tests/Integration/View/ViewComponentTest.php
index e39194e2c..8d35ac444 100644
--- a/tests/Integration/View/ViewComponentTest.php
+++ b/tests/Integration/View/ViewComponentTest.php
@@ -1271,4 +1271,139 @@ public function test_nested_slot_rendering(): void
$this->assertSnippetsMatch($expected, $html);
}
+
+ public function test_define_slot_renders_default_content_into_child_component(): void
+ {
+ // in x-header's template is OWNED by x-header.
+ // x-container has no "left" slot — it only has a default slot.
+ // When the caller provides nothing for "left", the default content inside
+ // the define tag is compiled and flows into x-container's default slot.
+ $this->view->registerViewComponent('x-container', '
');
+ $this->view->registerViewComponent('x-header-left', 'default-left');
+ $this->view->registerViewComponent('x-header', <<<'HTML'
+
+ HTML);
+
+ $html = $this->view->render('');
+
+ $this->assertSnippetsMatch(
+ '',
+ $html,
+ );
+ }
+
+ public function test_define_slot_is_overridden_by_caller_using_name(): void
+ {
+ // When the caller fills the "left" slot using , the compiled
+ // caller content replaces the default and flows into x-container's default slot.
+ // x-container remains unaware that "left" ever existed.
+ $this->view->registerViewComponent('x-container', '
');
+ $this->view->registerViewComponent('x-header-left', 'default-left');
+ $this->view->registerViewComponent('x-header', <<<'HTML'
+
+ HTML);
+
+ $html = $this->view->render(<<<'HTML'
+
+ custom-left
+
+ HTML);
+
+ $this->assertSnippetsMatch(
+ '',
+ $html,
+ );
+ }
+
+ public function test_multiple_define_slots_alongside_static_content_in_child_component(): void
+ {
+ // The full x-header scenario: two define slots flanking static content,
+ // all flowing as one contiguous default slot into x-container.
+ $this->view->registerViewComponent('x-container', '
');
+ $this->view->registerViewComponent('x-header-left', 'default-left');
+ $this->view->registerViewComponent('x-header-right', 'default-right');
+ $this->view->registerViewComponent('x-header', <<<'HTML'
+
+ HTML);
+
+ // No caller overrides — all three pieces use defaults.
+ $html = $this->view->render('');
+
+ $this->assertSnippetsMatch(
+ 'default-leftcenter
default-right ',
+ $html,
+ );
+
+ // Caller overrides only "right"; "left" stays default.
+ $html = $this->view->render(<<<'HTML'
+
+ custom-right
+
+ HTML);
+
+ $this->assertSnippetsMatch(
+ 'default-leftcenter
custom-right ',
+ $html,
+ );
+ }
+
+ public function test_define_slot_inside_child_named_slot_filler(): void
+ {
+ // nested inside (a named slot filler
+ // for x-inner) evaluates x-outer's own "left" slot and places the result into
+ // x-inner's "left" slot. The parent of the define token is the x-slot filler tag,
+ // which is not a view component, so $parentIsComponent is false and compileSlotToken()
+ // is called correctly.
+ $this->view->registerViewComponent('x-inner', '
');
+ $this->view->registerViewComponent('x-header-left', 'default-left');
+ $this->view->registerViewComponent('x-outer', <<<'HTML'
+
+
+
+
+
+
+
+ HTML);
+
+ // No caller override — default content flows through into x-inner's named slot.
+ $html = $this->view->render('');
+
+ $this->assertSnippetsMatch(
+ '',
+ $html,
+ );
+
+ // Caller overrides "left" — custom content flows through into x-inner's named slot.
+ $html = $this->view->render(<<<'HTML'
+
+ custom-left
+
+ HTML);
+
+ $this->assertSnippetsMatch(
+ '',
+ $html,
+ );
+ }
}