Umfragen / State of HTML 2025
This survey closed on August 31, 2025.

6/11Web Components

Making & using web components.

  1. Using Custom Elements
  2. Defining Custom Elements
  3. Declarative Custom Elements
  4. Scoped Custom Element Registries
  5. Shadow DOM
  6. Declarative Shadow DOM
  7. slot attribute
  8. Imperative slot assignment
  9. ElementInternals API
  10. Reference Target API
  11. :has-slotted
  12. Web Components Pain Points
  13. Other Web Components Pain Points

Using custom elements, that you or someone else defined.

html 
<my-switch start="On" end="Off">Wi-Fi</my-switch>
Tell us more:
Tell us more:
Tell us more:

Defining custom elements for use by others.

js 
class MyElement extends HTMLElement { … }
customElements.define("my-element", MyElement);
Tell us more:
Tell us more:
Tell us more:

Create web components declaratively through HTML, with or without JS.

html 
<definition name="progress-ring">
  <template shadowmode="open">
    <div id="base" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{root.attributes.percentage.value}}">
      <slot>{{ root.attributes.percentage.value }}%</slot>
    </div>
    <style>#base { /* ... */ }</style>
  </template>
</definition>

<progress-ring value="50"></progress-ring>
Tell us more:
Tell us more:
Tell us more:

Allow multiple custom element definitions for a single tag name to exist within a page.

js 
const registry = new CustomElementRegistry();
registry.define('sub-element', SubElement);
Tell us more:
Tell us more:
Tell us more:

Encapsulate elements not visible from the outside, and style them with CSS not affecting the rest of the page.

js 
this.shadowRoot = this.attachShadow({mode: "open"});
Tell us more:
Tell us more:
Tell us more:

Define shadow trees with HTML, such as when server-side-rendering web components.

html 
<host-element>
    <template shadowrootmode="open">
        <!-- Shadow content -->
    </template>
</host-element>
Tell us more:
Tell us more:
Tell us more:

Replacing predefined parts of a component UI with your own elements.

html 
<my-switch>
  Wi-Fi
  <i slot="start" class="icon-on">On</i>
  <i slot="end" class="icon-off">Off</i>
</my-switch>
Tell us more:
Tell us more:
Tell us more:

A way to assign elements to slots manually via JS, so that slot assignment does not have to be managed by the component consumers.

js 
this.attachShadow({mode: "open", slotAssignment: "manual" });
let headerSlot = this.shadowRoot.querySelector("slot[name=header]");
let header = this.querySelector("header");
if (header) headerSlot.assign(header);
Tell us more:
Tell us more:
Tell us more:

Assign hidden semantics to custom elements, facilitating accessibility and allowing them to participate fully in forms.

js 
this._internals = this.attachInternals();
this._internals.role = "progressbar";
Tell us more:
Tell us more:
Tell us more:

A way to “redirect” id references to a component to elements in its shadow DOM (for ARIA, labels, popovers etc).

js 
this.attachShadow({ 
  mode: "open",
  referenceTarget: "real-input",
});
this.shadowRoot.innerHTML = `<input id="real-input">`;
Tell us more:
Tell us more:
Tell us more:

CSS pseudo-class that allows targeting <slot> elements only when they have slotted nodes.

css 
slot[name=icon]:not(:has-slotted) + .icon-label {
  display: none;
}
Tell us more:
Tell us more:
Tell us more:

3
Wähle bis zu 3 Elemente.

Next sectionAccessibility
Previous section Performance
State of HTML 2025