Surveys / State of HTML 2023
This survey closed on October 19, 2023. View Survey Results »

4/9Web Components

Making & using web components.

  1. <template>
  2. Using Custom Elements
  3. Defining Custom Elements
  4. Scoped Custom Element Registries
  5. Shadow DOM
  6. Declarative Shadow DOM
  7. Named slot assignment
  8. Imperative slot assignment
  9. ElementInternals API
  10. DOM Parts
  11. HTML Modules
  12. Other Web Component Features
  13. Web Components Libraries
  14. Using Web Components Pain Points
  15. Making Web Components Pain Points

A mechanism for holding HTML that is not to be rendered immediately but may be utilized later via JS.

html 
<template id="counter">
	<div class="counter">Clicked {{ times }} times</div>
</template>
Tell us more:
Tell us more:
Tell us more:

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:

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 cacheable representation of a part of the DOM that can be updated performantly.

Tell us more:
Tell us more:
Tell us more:

Import HTML files via JS imports and access their elements and JS exports.

html 
<script type="module">
	import { TabList } from "./tablist.html" with { type: 'html' };
	customElements.define("tab-list", TabList);
</script>
Tell us more:
Tell us more:
Tell us more:

Check all that apply.

Check all that apply.

Using Web Components that you or others have made. Missing features, browser incompatibilities, etc.

What prevents you from creating the amazing components you envision? Missing features, browser incompatibilities, etc.
Next sectionAccessibility
Previous section Content