hostelement

A host element is the DOM element that owns or hosts a shadow tree in the Web Components architecture. When a shadow root is attached to an element, that element becomes the host of the shadow DOM, serving as the entry point for the encapsulated markup and behavior defined inside the shadow root. The host element can be any standard HTML element or a custom element.

In the Shadow DOM model, the shadow root is separate from the host element’s normal light DOM. The host element exposes a reference to its shadow root via the host’s shadowRoot property when the shadow root is created in open mode. If the shadow root is created in closed mode, the shadow root remains inaccessible from the outside, though the host element itself continues to exist in the document and can participate in the regular DOM.

The host element often defines the public API of a custom element, including observed attributes, property getters and setters, and events that external code can interact with. Styles intended to affect the internal shadow tree are written inside the shadow root and can reach the host element via selectors such as the :host pseudo-class, enabling styling of the host from within the shadow DOM.

Common usage involves creating a custom element with a shadow root attached to itself. The host element provides a stable, encapsulated interface while the internal structure of the component remains isolated from the page’s global styles.

See also: Shadow DOM, custom elements, slot, :host.