Skip to content

Understanding Slots in PWC Components

Overview

Slots are placeholders in web components that allow flexible content projection. Think of them as "content holes" that can be filled with custom markup while maintaining component boundaries and encapsulation.

Slot Types

Default Slots

Accept content without a slot attribute - the primary content area: 

<pwc-card>
  <h3>Card Title</h3>
  <p>Main content goes here</p>
</pwc-card>

Named Slots

Require matching slot attribute for precise placement:

  • actions - Buttons and controls
  • heading - Header content
  • email/phone - Conditional form fields
  • false - Toggle off state content
  • link - Link placement in notifications

Common Patterns

Actions Slot

<pwc-action-bar>
  <h2>Page Title</h2>
  <div slot="actions">
    <pwc-button variant="secondary">Cancel</pwc-button>
    <pwc-button variant="primary">Save</pwc-button>
  </div>
</pwc-action-bar>

Conditional Slots

<pwc-button-section label="Contact Method">
  <pwc-input slot="email" label="Email" type="email" />
  <pwc-input slot="phone" label="Phone" type="tel" />
</pwc-button-section>

Toggle States

<pwc-toggle-section label="Advanced Settings">
  <pwc-input label="API Endpoint" />
  <p slot="false">Advanced features disabled</p>
</pwc-toggle-section>

Benefits

Flexibility without complexity - Replace multiple properties with rich content:

<!-- Before: Property-heavy -->
<pwc-card title="..." showActions="true" primaryAction="..." />

<!-- After: Slot-based -->
<pwc-card>
  <h3>Card Title</h3>
  <div slot="actions">
    <pwc-button>Cancel</pwc-button>
    <pwc-button variant="primary">Save</pwc-button>
  </div>
</pwc-card>

Key advantages: - Fewer component variants needed - Simpler APIs with focused responsibilities - Better separation of structure and content - Easier testing patterns

Best Practices

Use Semantic HTML

<!-- Good -->
<pwc-card>
  <header><h3>Title</h3></header>
  <footer slot="actions"><pwc-button>Action</pwc-button></footer>
</pwc-card>

<!-- Avoid -->
<pwc-card>
  <div>Title</div>
  <div slot="actions">Button</div>
</pwc-card>

Follow Naming Conventions

  • actions - Buttons and controls
  • heading - Header content
  • [condition] - Conditional content (email, phone, false)

Maintain Accessibility

<pwc-dialog>
  <div slot="heading" id="dialog-title"><h2>Notice</h2></div>
  <div aria-labelledby="dialog-title">Content...</div>
  <div slot="actions" role="group">
    <pwc-button>Dismiss</pwc-button>
  </div>
</pwc-dialog>

Framework Usage

React

<pwc-expandable-section expanded={isExpanded}>
  <h3>Section Title</h3>
  {isExpanded && <div slot="expanded">Content</div>}
</pwc-expandable-section>

Angular

<pwc-conditional-section [condition]="showAdvanced">
  <div *ngIf="showAdvanced" slot="advanced">
    <pwc-input label="Advanced Option" />
  </div>
</pwc-conditional-section>

JavaScript

const content = document.createElement('div');
content.setAttribute('slot', 'advanced');
section.appendChild(content);

Troubleshooting

Content not appearing: - Check slot name spelling (actions not action) - Verify component supports the slot

Multiple elements in named slot: 

<!-- Wrong -->
<button slot="actions">Button 1</button>
<button slot="actions">Button 2</button>

<!-- Correct -->
<div slot="actions">
  <button>Button 1</button>
  <button>Button 2</button>
</div>

Debug: Use element.assignedSlot to check slot assignment

Advanced Patterns

Multi-Context Reusability

<pwc-card>
  <h3>Blog Post Title</h3>
  <div slot="actions"><pwc-button>Read More</pwc-button></div>
</pwc-card>

<pwc-card>
  <h3>Product Name</h3>
  <div slot="actions"><pwc-button>Buy Now</pwc-button></div>
</pwc-card>

Dynamic Composition

<pwc-wizard step="2">
  <div slot="step-1"><h3>Personal Info</h3></div>
  <div slot="step-2"><h3>Contact Details</h3></div>
</pwc-wizard>

For component-specific slot usage, refer to individual component pages in Storybook.