Testing the <slot> element

The Web Component <slot> element is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together.

Important for auditors: slotted content is not hidden from assistive technology or from testing tools. The elements you place inside <my-component> below remain regular, fully inspectable light DOM, their tags, attributes, and accessible names are completely intact. The <slot> mechanism only changes where content is rendered visually; it does not affect accessibility exposure or auditability the way a closed shadow root does.

Example

In this example, a <my-component> web component is added to the page, and it can be treated like a separate document, with its own styles. The slots are defined in JavaScript.

HTML markup:

<my-component>
  <h2 slot="title">Hello, World!</h2>
  <p slot="content">This is a paragraph...</p>
</my-component>

JavaScript:

class MyComponent extends HTMLElement {
    constructor() {
        super();

        const shadow = this.attachShadow({ mode: 'open' });

        shadow.innerHTML = `
            <style>
                .container {
                    border: 2px solid #000;
                    padding: 10px;
                    border-radius: 5px;
                    width: 300px;
                }
                ::slotted(h2) {
                    color: blue;
                }
                ::slotted(p) {
                    color: green;
                }
            </style>
            <div class="container">
                <slot name="title"></slot>
                <slot name="content"></slot>
            </div>
        `;
    }
}

customElements.define('my-component', MyComponent);

Testing home