HTML Part and Exportparts Attributes: Styling Component Internals

A small piece of HTML can change what a visitor sees or how the browser understands a page. In this lesson, you will explore part and exportparts attributes: styling component internals using a short example that you can inspect and change.

The Idea in Plain English

Shadow DOM gives a web component an internal DOM tree separate from the light DOM. Slots and part/exportparts provide controlled ways to compose content and styling across the boundary.

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="card-template" shadowrootmode="open">
    <style>
        .card { border: 1px solid #888; padding: 1rem; }
    </style>
    <div class="card"><slot>Card content</slot></div>
</template>

What Each Part Does

The template element holds markup that remains inert until used.
The style element contains CSS rather than ordinary HTML body text.
A div groups content without adding a special meaning.
id names an element for labels, fragments, CSS or JavaScript; IDs should be unique.
shadowrootmode requests declarative Shadow DOM in a template.
class gives reusable identifiers for styling or structured conventions.

The browser can render component internals without exposing every internal class to ordinary page selectors.

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: style a nested button using part names. Then inspect the page and explain what changed.

Common Beginner Mistakes

Assuming shadow DOM is a security boundary that protects secrets; it is for encapsulation, not secrecy.
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

Shadow DOM gives a web component an internal DOM tree separate from the light DOM. Slots and part/exportparts provide controlled ways to compose content and styling across the boundary.
The browser can render component internals without exposing every internal class to ordinary page selectors.
Test the markup in a browser, and check accessibility and real-world behavior where relevant.