DOM

The DocumentFragment node’s host concept is useful for HTML’s template element and for shadow roots, and impacts the pre-insert and replace algorithms.

DocumentFragment/DocumentFragment

In all current engines.

Firefox24+Safari8+Chrome29+ Opera16+Edge79+ Edge (Legacy)17+IENone Firefox for Android24+iOS Safari8+Chrome for Android29+Android WebView37+Samsung Internet2.0+Opera Mobile16+

The new DocumentFragment() constructor steps are to set this’s node document to current global object’s associated Document.

ShadowRoot

In all current engines.

Firefox63+Safari10.1+Chrome53+ Opera40+Edge79+ Edge (Legacy)NoneIENone Firefox for Android63+iOS Safari10.3+Chrome for Android53+Android WebView53+Samsung Internet6.0+Opera Mobile41+

[Exposed=Window]
interface ShadowRoot : DocumentFragment { readonly attribute ShadowRootMode mode; readonly attribute boolean delegatesFocus; readonly attribute SlotAssignmentMode slotAssignment; readonly attribute Element host; attribute EventHandler onslotchange;
}; enum ShadowRootMode { "open", "closed" };
enum SlotAssignmentMode { "manual", "named" };

ShadowRoot nodes are simply known as shadow roots.

Shadow roots have an associated mode ("open"
or "closed").

Shadow roots have an associated delegates focus.
It is initially set to false.

Shadow roots have an associated available to element internals. It is initially set to false.

Shadow roots’s associated host is never null.

Shadow roots have an associated slot assignment ("manual" or "named").

A shadow root’s get the parent algorithm, given an event, returns
null if event’s event handler, whose event handler event type is slotchange.

In shadow-including tree order is shadow-including preorder, depth-first traversal of a node tree. Shadow-including preorder, depth-first traversal of a node tree tree is preorder, depth-first traversal of tree, with for each shadow host encountered in tree, shadow-including preorder, depth-first traversal of that element’s shadow root’s node tree just after it is encountered.

The shadow-including root of an object is its root’s host’s shadow-including root, if the
object’s root is a shadow root; otherwise its root.

An object A is a shadow-including descendant of an object B, if A is a descendant of B, or A’s root is a shadow root and A’s root’s host is a shadow-including inclusive descendant of B.

A shadow-including inclusive descendant is an object or one of its shadow-including descendants.

An object A is a shadow-including ancestor of an object B, if and only if B is a shadow-including descendant of A.

A shadow-including inclusive ancestor is an object or one of its shadow-including ancestors.

A node A is closed-shadow-hidden from a node B if all of the following conditions are true:

To retarget an object A against an object B, repeat these steps until they return an object:

The retargeting algorithm is used by event dispatch as well
as other specifications, such as Fullscreen. [FULLSCREEN]

Element

In all current engines.

Firefox1+Safari1+Chrome1+ Opera8+Edge79+ Edge (Legacy)12+IE4+ Firefox for Android4+iOS Safari1+Chrome for Android18+Android WebView1+Samsung Internet1.0+Opera Mobile10.1+

[Exposed=Window]
interface Element : ); , ); [, ); [, , ); [, optional ); ); , ); ); , ); [); [); [); readonly attribute ); ); ); // legacy alias of .matches ); , ); ); [, ); // legacy , ); // legacy
}; dictionary ShadowRootInit { required ShadowRootMode mode; boolean delegatesFocus = false; SlotAssignmentMode slotAssignment = "named";
};

Element nodes are simply known as elements.

Elements have an associated namespace, namespace prefix, local name, custom element state, custom element definition, is value. When an element is created, all of these values are
initialized.

An element’s custom element state is one of
"undefined", "failed", "uncustomized",
"precustomized", or "custom". An element whose custom element state is "uncustomized" or "custom" is
said to be defined. An element whose custom element state is "custom" is said to be custom.

Whether or not an element is defined is used to determine the
behavior of the :defined pseudo-class. Whether or not an element is custom is
used to determine the behavior of the mutation algorithms. The
"failed" and "precustomized" states are used to ensure that if a custom element constructor fails to execute correctly the first time, it is not executed
again by an

The following code illustrates elements in each of these four states:

<!DOCTYPE html>
<script> window.customElements.define("sw-rey", class extends HTMLElement {}) window.customElements.define("sw-finn", class extends HTMLElement {}, { extends: "p" }) window.customElements.define("sw-kylo", class extends HTMLElement { constructor() { // super() intentionally omitted for this example } })
</script> <!-- "undefined" (not defined, not custom) -->
<sw-han></sw-han>
<p is="sw-luke"></p>
<p is="asdf"></p> <!-- "failed" (not defined, not custom) -->
<sw-kylo></sw-kylo> <!-- "uncustomized" (defined, not custom) -->
<p></p>
<asdf></asdf> <!-- "custom" (defined, custom) -->
<sw-rey></sw-rey>
<p is="sw-finn"></p>