michaelschiemer/docs/claude/livecomponent-slot-system.md

LiveComponents Slot System

Umfassende Dokumentation des Slot Systems für flexible Component-Komposition im Custom PHP Framework.

Übersicht

Das Slot System ermöglicht es Components, flexible Bereiche zu definieren, in die Parent Components ihren eigenen Content einfügen können - ähnlich wie Vue's Slots oder React's children/render props Pattern.

Key Features:

• ✅ Named Slots - Spezifische Placement Points (header, footer, sidebar)
• ✅ Default Slots - Unnamed slot für allgemeinen Content
• ✅ Scoped Slots - Slots mit Zugriff auf Component-Daten via Context
• ✅ Required Slots - Validation dass notwendige Slots gefüllt sind
• ✅ Default Content - Fallback-Content wenn Slot nicht gefüllt wird
• ✅ Content Processing - Automatische Wrapper und Transformationen
• ✅ Custom Validation - Component-spezifische Slot-Validierung
• ✅ XSS Protection - Automatisches HTML-Escaping in Context-Values

Architektur

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│ SlotDefinition  │───▶│  SlotManager    │───▶│  SlotProcessor  │
│ (What exists)   │    │  (Resolution)   │    │  (Rendering)    │
└─────────────────┘    └─────────────────┘    └─────────────────┘
         │                      │                        │
   SlotContent            SupportsSlots             DomProcessor
   (Provided)             (Component)               (Template)
         │                      │                        │
   SlotContext ──────────────────────────────────────────┘
   (Scoped Data)

Kern-Komponenten

1. SlotDefinition - Slot-Definition Value Object

Definiert welche Slots in einer Component verfügbar sind.

final readonly class SlotDefinition
{
    public function __construct(
        public string $name,                // Slot name (z.B. 'header', 'footer')
        public string $defaultContent = '', // Fallback content
        public array $props = [],           // Props für scoped slots
        public bool $required = false       // Pflicht-Slot?
    ) {}
}

Factory Methods:

// Default (unnamed) Slot
SlotDefinition::default('<p>Default content</p>');

// Named Slot
SlotDefinition::named('header', '<h1>Default Header</h1>');

// Scoped Slot mit Props
SlotDefinition::scoped('content', ['userId', 'userName'], '<p>Default</p>');

// Required Slot
SlotDefinition::named('body')->withRequired(true);

Beispiel:

public function getSlotDefinitions(): array
{
    return [
        SlotDefinition::named('header', '<h2>Default Header</h2>'),
        SlotDefinition::named('body')->withRequired(true),
        SlotDefinition::scoped('footer', ['closeFunction'], '<button onclick="{closeFunction}">Close</button>'),
    ];
}

---

2. SlotContent - Slot-Content Value Object

Repräsentiert den Content, der einen Slot füllt.

final readonly class SlotContent
{
    public function __construct(
        public string $slotName,           // Name des Slots
        public string $content,            // HTML/Text content
        public array $data = [],           // Data für scoped slots
        public ?ComponentId $componentId = null // Optional: Component reference
    ) {}
}

Factory Methods:

// Default slot content
SlotContent::default('<p>Main content</p>');

// Named slot content
SlotContent::named('header', '<h1>Custom Header</h1>');

// Named slot with data (for scoped slots)
SlotContent::named('content', '<p>{userName}</p>', ['userName' => 'John']);

// Content from component
SlotContent::fromComponent('header', $componentId, '<h1>Header</h1>');

Hilfsmethoden:

$content = SlotContent::named('header', '<h1>Header</h1>');

$content->isDefault();          // false
$content->isEmpty();            // false
$content->hasData();            // false
$content->isFromComponent();    // false

// Content transformieren
$updated = $content->withContent('<h2>New Header</h2>');
$withData = $content->withData(['key' => 'value']);

---

3. SlotContext - Scoped Slot Context

Provides context/data to scoped slots, ermöglicht Parent Zugriff auf Child-Component-Daten.

final readonly class SlotContext
{
    public function __construct(
        public array $data = [],      // Context data
        public array $metadata = []   // Additional metadata
    ) {}
}

Factory Methods:

// Empty context
SlotContext::empty();

// Context with data
SlotContext::create([
    'userId' => 123,
    'userName' => 'John Doe',
    'isAdmin' => true,
]);

// Context with metadata
SlotContext::create(
    data: ['userId' => 123],
    metadata: ['timestamp' => time()]
);

Fluent API:

$context = SlotContext::empty()
    ->with('userId', 123)
    ->with('userName', 'John Doe')
    ->withData(['role' => 'admin'])
    ->withMetadata(['version' => '1.0']);

// Zugriff
$userId = $context->get('userId');           // 123
$role = $context->get('role', 'guest');      // 'admin'
$hasUser = $context->has('userId');          // true

// Manipulation
$updated = $context->without('role');
$merged = $context1->merge($context2);

---

4. SupportsSlots Interface

Components die Slots unterstützen müssen dieses Interface implementieren.

interface SupportsSlots
{
    /**
     * Get slot definitions for this component
     * @return array<SlotDefinition>
     */
    public function getSlotDefinitions(): array;

    /**
     * Get context data for a specific slot (scoped slots)
     */
    public function getSlotContext(string $slotName): SlotContext;

    /**
     * Process slot content before rendering
     */
    public function processSlotContent(SlotContent $content): SlotContent;

    /**
     * Validate that required slots are filled
     * @return array<string> Validation errors (empty if valid)
     */
    public function validateSlots(array $providedSlots): array;
}

Implementierung:

final readonly class CardComponent implements LiveComponent, SupportsSlots
{
    public function getSlotDefinitions(): array
    {
        return [
            SlotDefinition::named('header', '<div class="card-header-default">Card Header</div>'),
            SlotDefinition::named('body')->withRequired(true),
            SlotDefinition::named('footer', ''),
        ];
    }

    public function getSlotContext(string $slotName): SlotContext
    {
        // Card doesn't need scoped slots
        return SlotContext::empty();
    }

    public function processSlotContent(SlotContent $content): SlotContent
    {
        // Apply card-specific CSS classes
        $wrappedContent = match ($content->slotName) {
            'header' => '<div class="card-header">' . $content->content . '</div>',
            'body' => '<div class="card-body">' . $content->content . '</div>',
            'footer' => '<div class="card-footer">' . $content->content . '</div>',
            default => $content->content
        };

        return $content->withContent($wrappedContent);
    }

    public function validateSlots(array $providedSlots): array
    {
        $errors = [];

        // Custom validation: warn if footer without header
        $hasHeader = false;
        $hasFooter = false;

        foreach ($providedSlots as $slot) {
            if ($slot->slotName === 'header') $hasHeader = true;
            if ($slot->slotName === 'footer') $hasFooter = true;
        }

        if ($hasFooter && !$hasHeader) {
            $errors[] = 'Card footer provided without header - consider adding a header';
        }

        return $errors;
    }
}

---

5. SlotManager - Core Slot Management

Zentrale Verwaltung von Slot-Resolution, Validation und Rendering.

final class SlotManager
{
    /**
     * Register slot contents for a component
     */
    public function registerSlotContents(ComponentId $componentId, array $contents): void;

    /**
     * Get registered slot contents for a component
     * @return array<SlotContent>
     */
    public function getSlotContents(ComponentId $componentId): array;

    /**
     * Resolve slot content for rendering
     * Priority: Provided content > Default content
     */
    public function resolveSlotContent(
        SupportsSlots $component,
        SlotDefinition $definition,
        array $providedContents
    ): string;

    /**
     * Validate slots for a component
     * @return array<string> Validation errors (empty if valid)
     */
    public function validateSlots(SupportsSlots $component, array $providedContents): array;

    /**
     * Check if component has specific slot
     */
    public function hasSlot(SupportsSlots $component, string $slotName): bool;

    /**
     * Get slot definition by name
     */
    public function getSlotDefinition(SupportsSlots $component, string $slotName): ?SlotDefinition;

    /**
     * Clear all registered slot contents
     */
    public function clear(): void;

    /**
     * Get statistics about registered slots
     */
    public function getStats(): array;
}

Resolution-Logik:

1. Find Provided Content - Suche SlotContent für Slot-Name
2. Process Content - Führe processSlotContent() aus
3. Inject Context (bei scoped slots) - Ersetze {context.key} Placeholders
4. Return Content - Oder Default Content wenn nichts provided

Context Injection:

// Scoped slot content
$content = '<p>User: {context.userName} (ID: {context.userId})</p>';

// Context data
$context = SlotContext::create([
    'userId' => 123,
    'userName' => 'John Doe',
]);

// After injection
// Result: '<p>User: John Doe (ID: 123)</p>'

---

6. SlotProcessor - Template Integration

DomProcessor für Template-Rendering mit Slot-Unterstützung.

final readonly class SlotProcessor implements DomProcessor
{
    public function __construct(
        private SlotManager $slotManager
    ) {}

    public function process(DomWrapper $dom, RenderContext $context): DomWrapper
    {
        // Check if component supports slots
        if ($component instanceof SupportsSlots) {
            return $this->processWithSlotSystem($dom, $context, $component);
        }

        // Fallback to legacy slot processing
        return $this->processLegacySlots($dom, $context);
    }
}

Features:

• ✅ Integration mit SlotManager
• ✅ Backward compatibility (legacy slots)
• ✅ Automatic slot validation
• ✅ Error handling (development vs production)
• ✅ Context injection für scoped slots

---

Slot-Patterns

Pattern 1: Named Slots - Basic Layout Composition

Use Case: Component mit mehreren spezifischen Bereichen (Header, Body, Footer).

Component Definition:

final readonly class CardComponent implements SupportsSlots
{
    public function getSlotDefinitions(): array
    {
        return [
            SlotDefinition::named('header', '<div class="card-header-default">Default Header</div>'),
            SlotDefinition::named('body')->withRequired(true),
            SlotDefinition::named('footer', ''),
        ];
    }
}

Template:

<div class="card">
    <slot name="header">
        <div class="card-header-default">Default Header</div>
    </slot>

    <slot name="body"></slot>

    <slot name="footer"></slot>
</div>

Usage:

<component name="card" id="user-card">
    <slot name="header">
        <h2>User Profile</h2>
        <p>John Doe</p>
    </slot>

    <slot name="body">
        <p><strong>Email:</strong> john@example.com</p>
        <p><strong>Role:</strong> Administrator</p>
    </slot>

    <slot name="footer">
        <button>Edit Profile</button>
        <button>View Activity</button>
    </slot>
</component>

Result:

• ✅ Custom header mit User-Info
• ✅ Custom body mit Details
• ✅ Custom footer mit Actions
• ✅ Alle Slots mit CSS-Wrappern via processSlotContent()

---

Pattern 2: Default Slot - Unnamed Content

Use Case: Container-Component die beliebigen Content aufnimmt.

Component Definition:

final readonly class ContainerComponent implements SupportsSlots
{
    public function getSlotDefinitions(): array
    {
        return [
            SlotDefinition::default('<div class="empty-container">No content</div>'),
            SlotDefinition::named('title'),
            SlotDefinition::named('actions', ''),
        ];
    }
}

Template:

<div class="container">
    <slot name="title">
        <h2>Container</h2>
    </slot>

    <!-- Default slot: all unnamed content goes here -->
    <slot>
        <div class="empty-container">No content provided</div>
    </slot>

    <slot name="actions"></slot>
</div>

Usage:

<component name="container" id="wrapper">
    <slot name="title">
        <h2>Welcome Container</h2>
    </slot>

    <!-- This goes into the default slot -->
    <h1>Welcome to the Platform</h1>
    <p>This is the main content.</p>
    <p>All unnamed content appears in the default slot.</p>

    <slot name="actions">
        <button>Get Started</button>
        <button>Learn More</button>
    </slot>
</component>

Result:

• ✅ Named slots (title, actions) für spezifischen Content
• ✅ Default slot für flexiblen, unstrukturierten Content
• ✅ Fallback Content wenn Default Slot leer

---

Pattern 3: Scoped Slots - Component Data Access

Use Case: Parent braucht Zugriff auf Child-Component-Daten (z.B. Modal ID, Close Function).

Component Definition:

final readonly class ModalComponent implements SupportsSlots
{
    public function getSlotDefinitions(): array
    {
        return [
            SlotDefinition::named('title', '<h3>Modal Title</h3>'),
            SlotDefinition::scoped('content', ['modalId', 'isOpen', 'closeFunction'])->withRequired(true),
            SlotDefinition::scoped('actions', ['closeFunction', 'modalId']),
        ];
    }

    public function getSlotContext(string $slotName): SlotContext
    {
        $modalId = $this->id->toString();
        $isOpen = $this->state->get('isOpen', false);

        return match ($slotName) {
            'content', 'actions' => SlotContext::create([
                'modalId' => $modalId,
                'isOpen' => $isOpen,
                'closeFunction' => "closeModal('{$modalId}')",
            ]),
            default => SlotContext::empty()
        };
    }
}

Template:

<div class="modal" data-modal-id="{component.id}">
    <slot name="title">
        <h3>Modal Title</h3>
    </slot>

    <!-- Scoped slot: parent can access context -->
    <slot name="content"></slot>

    <!-- Scoped slot: parent can use closeFunction -->
    <slot name="actions">
        <button onclick="{context.closeFunction}">Close</button>
    </slot>
</div>

Usage:

<component name="modal" id="confirm-delete-modal">
    <slot name="title">
        <h3>Confirm Delete</h3>
    </slot>

    <slot name="content">
        <p>Are you sure you want to delete this item?</p>
        <p>This action cannot be undone.</p>
        <!-- Access component data via {context.key} -->
        <p><small>Modal ID: {context.modalId}</small></p>
    </slot>

    <slot name="actions">
        <!-- Use component's close function -->
        <button onclick="{context.closeFunction}">Cancel</button>
        <button class="btn-danger">Delete</button>
    </slot>
</component>

Result:

• ✅ Parent-Slot-Content hat Zugriff auf Child-Component-Daten
• ✅ {context.modalId} wird durch echte Modal-ID ersetzt
• ✅ {context.closeFunction} wird durch closeModal('modal-id') ersetzt
• ✅ XSS-Protection: Alle Context-Values werden HTML-escaped

---

Pattern 4: Complex Layout - Multi-Slot Composition

Use Case: Page-Layout mit mehreren Bereichen (Header, Sidebar, Main, Footer).

Component Definition:

final readonly class LayoutComponent implements SupportsSlots
{
    public function getSlotDefinitions(): array
    {
        return [
            SlotDefinition::scoped('sidebar', ['sidebarWidth', 'isCollapsed'], '<aside>Default Sidebar</aside>'),
            SlotDefinition::named('main')->withRequired(true),
            SlotDefinition::named('footer', '<footer>Default Footer</footer>'),
            SlotDefinition::named('header', ''),
        ];
    }

    public function getSlotContext(string $slotName): SlotContext
    {
        $sidebarWidth = $this->state->get('sidebarWidth', '250px');
        $isCollapsed = $this->state->get('sidebarCollapsed', false);

        return match ($slotName) {
            'sidebar' => SlotContext::create([
                'sidebarWidth' => $sidebarWidth,
                'isCollapsed' => $isCollapsed,
            ]),
            default => SlotContext::empty()
        };
    }
}

Usage:

<component name="layout" id="dashboard-layout">
    <slot name="header">
        <header class="app-header">
            <h1>My Application</h1>
            <nav>...</nav>
        </header>
    </slot>

    <slot name="sidebar">
        <!-- Scoped: access layout dimensions -->
        <aside style="width: {context.sidebarWidth}">
            <nav class="sidebar-nav">
                <ul>
                    <li><a href="/dashboard">Dashboard</a></li>
                    <li><a href="/users">Users</a></li>
                    <li><a href="/settings">Settings</a></li>
                </ul>
            </nav>
        </aside>
    </slot>

    <slot name="main">
        <main class="main-content">
            <h2>Dashboard</h2>
            <p>Welcome to your dashboard!</p>
        </main>
    </slot>

    <slot name="footer">
        <footer class="app-footer">
            <p>&copy; 2025 My Application</p>
        </footer>
    </slot>
</component>

---

Slot Validation

Required Slots

SlotDefinition::named('body')->withRequired(true);

Validation:

• ✅ Automatische Prüfung via SlotManager::validateSlots()
• ✅ Fehler wenn Required Slot nicht gefüllt oder leer
• ✅ Validation-Errors als Array zurückgegeben

Error Handling:

$errors = $slotManager->validateSlots($component, $providedSlots);

if (!empty($errors)) {
    // Development: Show errors
    // Production: Log errors
    foreach ($errors as $error) {
        error_log("Slot validation error: $error");
    }
}

Custom Validation

Components können eigene Validation-Logik in validateSlots() implementieren:

public function validateSlots(array $providedSlots): array
{
    $errors = [];

    // Custom logic: warn if footer without header
    $hasHeader = false;
    $hasFooter = false;

    foreach ($providedSlots as $slot) {
        if ($slot->slotName === 'header') $hasHeader = true;
        if ($slot->slotName === 'footer') $hasFooter = true;
    }

    if ($hasFooter && !$hasHeader) {
        $errors[] = 'Card footer provided without header - visual consistency issue';
    }

    return $errors;
}

---

Content Processing

Automatic Wrapping

Components können Slot-Content automatisch wrappen via processSlotContent():

public function processSlotContent(SlotContent $content): SlotContent
{
    $wrappedContent = match ($content->slotName) {
        'header' => '<div class="card-header">' . $content->content . '</div>',
        'body' => '<div class="card-body">' . $content->content . '</div>',
        'footer' => '<div class="card-footer">' . $content->content . '</div>',
        default => $content->content
    };

    return $content->withContent($wrappedContent);
}

Result:

• ✅ Automatische CSS-Wrapper für jeden Slot
• ✅ Konsistentes Styling ohne manuelle Wrapper im Parent
• ✅ Component-spezifische Transformationen

State-Based Processing

public function processSlotContent(SlotContent $content): SlotContent
{
    // Get padding from state
    $padding = $this->state->get('padding', 'medium');
    $paddingClass = 'container-padding-' . $padding;

    $wrappedContent = match ($content->slotName) {
        'default' => "<div class=\"container-content {$paddingClass}\">" . $content->content . '</div>',
        default => $content->content
    };

    return $content->withContent($wrappedContent);
}

---

Security

XSS Protection

Automatic HTML Escaping in scoped context values:

private function formatValue(mixed $value): string
{
    if (is_scalar($value)) {
        return htmlspecialchars((string) $value, ENT_QUOTES, 'UTF-8');
    }

    if (is_array($value)) {
        return htmlspecialchars(json_encode($value), ENT_QUOTES, 'UTF-8');
    }

    return '';
}

Result:

• ✅ Alle Context-Values werden automatisch escaped
• ✅ <script> → <script>
• ✅ Schutz vor XSS-Attacken via Scoped Slots

Beispiel:

// Malicious context value
$context = SlotContext::create([
    'userInput' => '<script>alert("XSS")</script>',
]);

// In slot content
'<p>{context.userInput}</p>'

// After injection (safe!)
'<p>&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;</p>'

---

Best Practices

1. Slot Design

✅ DO:

• Klare Slot-Namen verwenden (header, body, footer statt slot1, slot2)
• Default Content für alle Optional Slots definieren
• Required Slots nur für essentiellen Content
• Scoped Slots für Component-Daten die Parent braucht

❌ DON'T:

• Zu viele Slots definieren (max. 5-6 für Übersichtlichkeit)
• Alle Slots als Required markieren
• Sensitive Daten in Scoped Context legen
• Komplexe Logik in processSlotContent()

2. Content Processing

✅ DO:

• Automatische Wrapper für konsistentes Styling
• State-basierte Transformationen (padding, themes)
• Slot-spezifische CSS-Klassen
• Immutable Content-Transformationen (withContent())

❌ DON'T:

• Content manipulieren ohne withContent()
• Seiteneffekte in processSlotContent()
• Zu aggressive Transformationen
• Parent-Content überschreiben

3. Validation

✅ DO:

• Required Slots für kritischen Content
• Custom Validation für logische Konsistenz
• Hilfreiche Error-Messages
• Validation in Development zeigen, in Production loggen

❌ DON'T:

• Validation-Errors swallowing
• Generische Error-Messages
• Validation-Logic in Templates
• Performance-intensive Validation

4. Scoped Slots

✅ DO:

• Nur notwendige Daten in Context legen
• HTML-Escaping ist automatisch (vertrauen)
• Dokumentierte Context-Props in SlotDefinition
• Klare Naming Convention ({context.key})

❌ DON'T:

• Sensitive Daten in Context (Passwords, Tokens)
• Zu viele Context-Props (max. 5-6)
• Komplexe Objekte in Context
• Manual HTML-Escaping (ist redundant)

---

Testing

Unit Tests - SlotManager

it('resolves provided content over default content', function () {
    $component = new TestComponent();
    $definition = SlotDefinition::named('header', '<h2>Default</h2>');
    $providedContent = [
        SlotContent::named('header', '<h1>Custom</h1>'),
    ];

    $result = $this->slotManager->resolveSlotContent(
        $component,
        $definition,
        $providedContent
    );

    expect($result)->toBe('<h1>Custom</h1>');
});

Integration Tests - Components

it('renders CardComponent with custom slots', function () {
    $component = new CardComponent(
        id: ComponentId::generate(),
        state: ComponentState::fromArray([])
    );

    $providedSlots = [
        SlotContent::named('header', '<h2>User Profile</h2>'),
        SlotContent::named('body', '<p>User details...</p>'),
    ];

    $errors = $this->slotManager->validateSlots($component, $providedSlots);
    expect($errors)->toBeEmpty();
});

Template Tests

it('processes slots in template', function () {
    $html = '<component name="card">
        <slot name="header"><h1>Header</h1></slot>
        <slot name="body"><p>Body</p></slot>
    </component>';

    $result = $this->templateRenderer->render($html, [
        'component' => new CardComponent(...),
    ]);

    expect($result)->toContain('card-header');
    expect($result)->toContain('card-body');
});

---

Troubleshooting

Problem: Slot Content wird nicht angezeigt

Ursache: Slot-Name stimmt nicht überein.

Lösung:

// Check slot definitions
$slotNames = $this->slotManager->getSlotNames($component);
var_dump($slotNames); // ['header', 'body', 'footer']

// Verify provided content
foreach ($providedSlots as $slot) {
    echo $slot->slotName; // Muss mit Definition übereinstimmen
}

Problem: Scoped Context wird nicht injiziert

Ursache: Slot nicht als Scoped definiert.

Lösung:

// ❌ WRONG: Named slot (no context injection)
SlotDefinition::named('content');

// ✅ CORRECT: Scoped slot with props
SlotDefinition::scoped('content', ['modalId', 'closeFunction']);

Problem: XSS in Context Values

Ursache: Custom formatValue() ohne Escaping.

Lösung:

// ❌ WRONG: No escaping
private function formatValue(mixed $value): string
{
    return (string) $value; // XSS vulnerability!
}

// ✅ CORRECT: Automatic escaping
private function formatValue(mixed $value): string
{
    if (is_scalar($value)) {
        return htmlspecialchars((string) $value, ENT_QUOTES, 'UTF-8');
    }
    return '';
}

Problem: Required Slot Validation schlägt fehl

Ursache: Slot ist empty oder nur Whitespace.

Lösung:

// Check if slot is truly empty
$content = SlotContent::named('body', '   ');
if ($content->isEmpty()) {
    // Will fail required validation
}

// ✅ Provide actual content
SlotContent::named('body', '<p>Content</p>');

---

Performance

Slot Resolution Performance

Typical Performance:

• Slot Resolution: < 1ms per slot
• Context Injection: < 0.5ms per placeholder
• Validation: < 2ms für 5-6 slots
• Total Overhead: < 5ms per component

Optimizations:

• ✅ Slot definitions gecached in Component
• ✅ Keine Reflection für Slot-Discovery
• ✅ Simple string replacement für Context
• ✅ Minimal regex usage

Best Practices für Performance

✅ DO:

• Slot definitions im Constructor definieren
• Simple Context-Values (strings, ints)
• Cached Component-Instances
• Minimal Validation-Logic

❌ DON'T:

• Dynamic Slot-Definitions
• Complex Objects in Context
• Database-Queries in getSlotContext()
• Expensive Transformations in processSlotContent()

---

Migration Guide

Von Legacy Slots zu Slot System

Before (Legacy):

final class OldCard
{
    public function render(array $slots): string
    {
        $header = $slots['header'] ?? '<h2>Default</h2>';
        $body = $slots['body'] ?? '';

        return "<div class='card'>$header $body</div>";
    }
}

After (Slot System):

final readonly class NewCard implements SupportsSlots
{
    public function getSlotDefinitions(): array
    {
        return [
            SlotDefinition::named('header', '<h2>Default</h2>'),
            SlotDefinition::named('body')->withRequired(true),
        ];
    }

    public function processSlotContent(SlotContent $content): SlotContent
    {
        // Automatic wrapping
        $wrapped = "<div class='card-{$content->slotName}'>{$content->content}</div>";
        return $content->withContent($wrapped);
    }
}

Benefits:

• ✅ Type-safe Slot-Definitionen
• ✅ Automatische Validation
• ✅ Scoped Slots Support
• ✅ Content Processing Hooks
• ✅ Better Developer Experience

---

Zusammenfassung

Das Slot System bietet eine flexible, typsichere Lösung für Component-Komposition:

✅ Features:

• Named, Default und Scoped Slots
• Required Slots mit Validation
• Default Content Fallbacks
• Automatic Content Processing
• XSS Protection
• Custom Validation Hooks
• Template Integration
• Backward Compatibility

✅ Architecture:

• Value Objects für Type Safety
• SlotManager für Orchestration
• SupportsSlots Interface für Components
• SlotProcessor für Template-Rendering
• Framework-compliant (readonly, final, composition)

✅ Use Cases:

• Layout Components (Header/Sidebar/Main/Footer)
• Modal/Dialog Components
• Card/Container Components
• Complex Nested Compositions
• Dynamic Content Injection

Nächste Schritte:

• Weitere Example Components erstellen
• Performance Optimizations
• Advanced Caching für Slot-Resolution
• Visual Slot Editor (optional)