HTML <slot> Advanced Usage: Named and Default Slots

A small piece of HTML can change what a visitor sees or how the browser understands a page. In this lesson, you will explore <slot> advanced usage: named and default slots using a short example that you can inspect and change.

The Idea in Plain English

Slots let a custom element display content supplied by the page outside its shadow tree. Named slots match slot attributes; an unnamed slot receives eligible unassigned children.

You can test this using a small local HTML file. Change one part at a time and check the result in the browser before adding more code.

A Working Example

Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.

<template id="panel-template">
    <section>
        <h2><slot name="title">Untitled</slot></h2>
        <slot>Panel content goes here.</slot>
    </section>
</template>
<study-panel>
    <span slot="title">Weekly Tasks</span>
    <p>Finish the reading exercise.</p>
</study-panel>

What Each Part Does

• A slot marks where component-provided content can appear.
• The template element holds markup that remains inert until used.
• A section groups material about a related topic and usually has a heading.
• name identifies a field in submitted form data or a named metadata entry.
• slot assigns light-DOM content to a named slot in a component.
• id names an element for labels, fragments, CSS or JavaScript; IDs should be unique.

A component can wrap page-provided text in its own internal layout.

Keep the example small while learning. Once it behaves as expected, try it inside a larger page and make sure the URLs, files and surrounding HTML are correct.

Try It Yourself

Try this next: create a component with default body content. Then inspect the page and explain what changed.

Common Beginner Mistakes

• Expecting a slot tag by itself to project content without a shadow root.
• Changing several parts of the example at once, making it difficult to see which part caused a different result.
• Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.

Key Takeaways

• Slots let a custom element display content supplied by the page outside its shadow tree. Named slots match slot attributes; an unnamed slot receives eligible unassigned children.
• A component can wrap page-provided text in its own internal layout.
• Test the markup in a browser, and check accessibility and real-world behavior where relevant.