Struct Slot 

pub struct Slot;

The <slot> element - defines a placeholder in a web component’s shadow DOM.

Purpose

The <slot> element is part of the Web Components technology suite. It creates a placeholder inside a web component that users can fill with their own markup. Slots enable flexible, reusable components where content can be projected from the light DOM into the shadow DOM.

Content Categories

• Flow Content
• Phrasing Content

Permitted Content Model

• Transparent content (fallback content when slot is not filled)

Common Use Cases

• Creating reusable web components
• Defining customizable areas in shadow DOM templates
• Building flexible UI component libraries
• Implementing compound components with multiple insertion points
• Providing default fallback content for empty slots

Key Attributes

• name: Named slot identifier (unnamed slots are default slots)

Example

<!-- Custom element template (in shadow DOM) -->
<template id="card-template">
  <style>
    .card { border: 1px solid #ccc; padding: 1rem; }
    .card-header { font-weight: bold; }
  </style>
  <div class="card">
    <div class="card-header">
      <slot name="header">Default Header</slot>
    </div>
    <div class="card-body">
      <slot>Default content</slot>
    </div>
    <div class="card-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<!-- Usage of the custom element -->
<my-card>
  <span slot="header">Custom Header</span>
  <p>This is the main content that goes into the default slot.</p>
  <small slot="footer">Footer text</small>
</my-card>

<!-- Named slots with fallback -->
<custom-dialog>
  <h2 slot="title">Confirmation</h2>
  <p>Are you sure you want to proceed?</p>
  <div slot="actions">
    <button>Cancel</button>
    <button>OK</button>
  </div>
</custom-dialog>

WHATWG Specification

• 4.12.4 The slot element

Trait Implementations

impl HtmlElement for Slot

const TAG: &'static str = "slot"

The HTML tag name (e.g., “div”, “span”, “img”).

const VOID: bool = false

Whether this is a void element (self-closing, no children allowed).

impl<T: PhrasingContent> CanContain<T> for Slot

impl FlowContent for Slot

impl PhrasingContent for Slot