Interface ShadowRoot

A minimal document object that has no parent. It is used as a lightweight version of Document that stores a segment of a document structure comprised of nodes just like a standard document. The key difference is that because the document fragment isn't part of the active document tree structure, changes made to the fragment don't affect the document, cause reflow, or incur any performance impact that can occur when changes are made.

interface ShadowRoot {
    ATTRIBUTE_NODE: number;
    CDATA_SECTION_NODE: number;
    COMMENT_NODE: number;
    DOCUMENT_FRAGMENT_NODE: number;
    DOCUMENT_NODE: number;
    DOCUMENT_POSITION_CONTAINED_BY: number;
    DOCUMENT_POSITION_CONTAINS: number;
    DOCUMENT_POSITION_DISCONNECTED: number;
    DOCUMENT_POSITION_FOLLOWING: number;
    DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number;
    DOCUMENT_POSITION_PRECEDING: number;
    DOCUMENT_TYPE_NODE: number;
    ELEMENT_NODE: number;
    ENTITY_NODE: number;
    ENTITY_REFERENCE_NODE: number;
    NOTATION_NODE: number;
    PROCESSING_INSTRUCTION_NODE: number;
    TEXT_NODE: number;
    activeElement: null | Element;
    adoptedStyleSheets: CSSStyleSheet[];
    baseURI: string;
    childElementCount: number;
    childNodes: NodeListOf<ChildNode>;
    children: HTMLCollection;
    delegatesFocus: boolean;
    firstChild: null | ChildNode;
    firstElementChild: null | Element;
    fullscreenElement: null | Element;
    host: Element;
    innerHTML: string;
    isConnected: boolean;
    lastChild: null | ChildNode;
    lastElementChild: null | Element;
    mode: ShadowRootMode;
    nextSibling: null | ChildNode;
    nodeName: string;
    nodeType: number;
    nodeValue: null | string;
    onslotchange: null | ((this, ev) => any);
    ownerDocument: Document;
    parentElement: null | HTMLElement;
    parentNode: null | ParentNode;
    pictureInPictureElement: null | Element;
    pointerLockElement: null | Element;
    previousSibling: null | ChildNode;
    slotAssignment: SlotAssignmentMode;
    styleSheets: StyleSheetList;
    textContent: null | string;
    addEventListener<K>(type, listener, options?): void;
    addEventListener(type, listener, options?): void;
    append(...nodes): void;
    appendChild<T>(node): T;
    cloneNode(deep?): Node;
    compareDocumentPosition(other): number;
    contains(other): boolean;
    dispatchEvent(event): boolean;
    elementFromPoint(x, y): null | Element;
    elementsFromPoint(x, y): Element[];
    getAnimations(): Animation[];
    getElementById(elementId): null | HTMLElement;
    getRootNode(options?): Node;
    hasChildNodes(): boolean;
    insertBefore<T>(node, child): T;
    isDefaultNamespace(namespace): boolean;
    isEqualNode(otherNode): boolean;
    isSameNode(otherNode): boolean;
    lookupNamespaceURI(prefix): null | string;
    lookupPrefix(namespace): null | string;
    normalize(): void;
    prepend(...nodes): void;
    querySelector<K>(selectors): null | HTMLElementTagNameMap[K];
    querySelector<K>(selectors): null | SVGElementTagNameMap[K];
    querySelector<E>(selectors): null | E;
    querySelectorAll<K>(selectors): NodeListOf<HTMLElementTagNameMap[K]>;
    querySelectorAll<K>(selectors): NodeListOf<SVGElementTagNameMap[K]>;
    querySelectorAll<E>(selectors): NodeListOf<E>;
    removeChild<T>(child): T;
    removeEventListener<K>(type, listener, options?): void;
    removeEventListener(type, listener, options?): void;
    replaceChild<T>(node, child): T;
    replaceChildren(...nodes): void;
}

Hierarchy (view full)

Properties

ATTRIBUTE_NODE CDATA_SECTION_NODE COMMENT_NODE DOCUMENT_FRAGMENT_NODE DOCUMENT_NODE DOCUMENT_POSITION_CONTAINED_BY DOCUMENT_POSITION_CONTAINS DOCUMENT_POSITION_DISCONNECTED DOCUMENT_POSITION_FOLLOWING DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC DOCUMENT_POSITION_PRECEDING DOCUMENT_TYPE_NODE ELEMENT_NODE ENTITY_NODE ENTITY_REFERENCE_NODE NOTATION_NODE PROCESSING_INSTRUCTION_NODE TEXT_NODE activeElement adoptedStyleSheets baseURI childElementCount childNodes children delegatesFocus firstChild firstElementChild fullscreenElement host innerHTML isConnected lastChild lastElementChild mode nextSibling nodeName nodeType nodeValue onslotchange ownerDocument parentElement parentNode pictureInPictureElement pointerLockElement previousSibling slotAssignment styleSheets textContent

Methods

addEventListener append appendChild cloneNode compareDocumentPosition contains dispatchEvent elementFromPoint elementsFromPoint getAnimations getElementById getRootNode hasChildNodes insertBefore isDefaultNamespace isEqualNode isSameNode lookupNamespaceURI lookupPrefix normalize prepend querySelector querySelectorAll removeChild removeEventListener replaceChild replaceChildren

Properties

Readonly ATTRIBUTE_NODE

ATTRIBUTE_NODE: number

Readonly CDATA_SECTION_NODE

CDATA_SECTION_NODE: number

node is a CDATASection node.

Readonly COMMENT_NODE

COMMENT_NODE: number

node is a Comment node.

Readonly DOCUMENT_FRAGMENT_NODE

DOCUMENT_FRAGMENT_NODE: number

node is a DocumentFragment node.

Readonly DOCUMENT_NODE

DOCUMENT_NODE: number

node is a document.

Readonly DOCUMENT_POSITION_CONTAINED_BY

DOCUMENT_POSITION_CONTAINED_BY: number

Set when other is a descendant of node.

Readonly DOCUMENT_POSITION_CONTAINS

DOCUMENT_POSITION_CONTAINS: number

Set when other is an ancestor of node.

Readonly DOCUMENT_POSITION_DISCONNECTED

DOCUMENT_POSITION_DISCONNECTED: number

Set when node and other are not in the same tree.

Readonly DOCUMENT_POSITION_FOLLOWING

DOCUMENT_POSITION_FOLLOWING: number

Set when other is following node.

Readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC

DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number

Readonly DOCUMENT_POSITION_PRECEDING

DOCUMENT_POSITION_PRECEDING: number

Set when other is preceding node.

Readonly DOCUMENT_TYPE_NODE

DOCUMENT_TYPE_NODE: number

node is a doctype.

Readonly ELEMENT_NODE

ELEMENT_NODE: number

node is an element.

Readonly ENTITY_NODE

ENTITY_NODE: number

Readonly ENTITY_REFERENCE_NODE

ENTITY_REFERENCE_NODE: number

Readonly NOTATION_NODE

NOTATION_NODE: number

Readonly PROCESSING_INSTRUCTION_NODE

PROCESSING_INSTRUCTION_NODE: number

node is a ProcessingInstruction node.

Readonly TEXT_NODE

TEXT_NODE: number

node is a Text node.

Readonly activeElement

activeElement: null | Element

Returns the deepest element in the document through which or to which key events are being routed. This is, roughly speaking, the focused element in the document.

For the purposes of this API, when a child browsing context is focused, its container is focused in the parent browsing context. For example, if the user moves the focus to a text control in an iframe, the iframe is the element returned by the activeElement API in the iframe's node document.

Similarly, when the focused element is in a different node tree than documentOrShadowRoot, the element returned will be the host that's located in the same node tree as documentOrShadowRoot if documentOrShadowRoot is a shadow-including inclusive ancestor of the focused element, and null if not.

adoptedStyleSheets

adoptedStyleSheets: CSSStyleSheet[]

Readonly baseURI

baseURI: string

Returns node's node document's document base URL.

Readonly childElementCount

childElementCount: number

Readonly childNodes

childNodes: NodeListOf<ChildNode>

Returns the children.

Readonly children

children: HTMLCollection

Returns the child elements.

Readonly delegatesFocus

delegatesFocus: boolean

Readonly firstChild

firstChild: null | ChildNode

Returns the first child.

Readonly firstElementChild

firstElementChild: null | Element

Returns the first child that is an element, and null otherwise.

Readonly fullscreenElement

fullscreenElement: null | Element

Returns document's fullscreen element.

Readonly host

host: Element

innerHTML

innerHTML: string

Readonly isConnected

isConnected: boolean

Returns true if node is connected and false otherwise.

Readonly lastChild

lastChild: null | ChildNode

Returns the last child.

Readonly lastElementChild

lastElementChild: null | Element

Returns the last child that is an element, and null otherwise.

Readonly mode

mode: ShadowRootMode

Readonly nextSibling

nextSibling: null | ChildNode

Returns the next sibling.

Readonly nodeName

nodeName: string

Returns a string appropriate for the type of node.

Readonly nodeType

nodeType: number

Returns the type of node.

nodeValue

nodeValue: null | string

onslotchange

onslotchange: null | ((this, ev) => any)

Type declaration

Readonly ownerDocument

ownerDocument: Document

Returns the node document. Returns null for documents.

Readonly parentElement

parentElement: null | HTMLElement

Returns the parent element.

Readonly parentNode

parentNode: null | ParentNode

Returns the parent.

Readonly pictureInPictureElement

pictureInPictureElement: null | Element

Readonly pointerLockElement

pointerLockElement: null | Element

Readonly previousSibling

previousSibling: null | ChildNode

Returns the previous sibling.

Readonly slotAssignment

slotAssignment: SlotAssignmentMode

Readonly styleSheets

styleSheets: StyleSheetList

Retrieves a collection of styleSheet objects representing the style sheets that correspond to each instance of a link or style object in the document.

textContent

textContent: null | string

Methods

addEventListener

append

  • append(...nodes): void

  • Inserts nodes after the last child of node, while replacing strings in nodes with equivalent Text nodes.

    Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.

    Parameters

    • Rest ...nodes: (string | Node)[]

    Returns void

appendChild

cloneNode

  • cloneNode(deep?): Node

  • Returns a copy of node. If deep is true, the copy also includes the node's descendants.

    Parameters

    • Optional deep: boolean

    Returns Node

compareDocumentPosition

contains

  • contains(other): boolean

  • Returns true if other is an inclusive descendant of node, and false otherwise.

    Parameters

    Returns boolean

dispatchEvent

  • dispatchEvent(event): boolean

  • Dispatches a synthetic event event to target and returns true if either event's cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise.

    Parameters

    Returns boolean

elementFromPoint

elementsFromPoint

getAnimations

getElementById

getRootNode

hasChildNodes

insertBefore

isDefaultNamespace

isEqualNode

  • isEqualNode(otherNode): boolean

  • Returns whether node and otherNode have the same properties.

    Parameters

    • otherNode: null | Node

    Returns boolean

isSameNode

lookupNamespaceURI

lookupPrefix

normalize

  • normalize(): void

  • Removes empty exclusive Text nodes and concatenates the data of remaining contiguous exclusive Text nodes into the first of their nodes.

    Returns void

prepend

  • prepend(...nodes): void

  • Inserts nodes before the first child of node, while replacing strings in nodes with equivalent Text nodes.

    Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.

    Parameters

    • Rest ...nodes: (string | Node)[]

    Returns void

querySelector

querySelectorAll

removeChild

removeEventListener

replaceChild

replaceChildren

  • replaceChildren(...nodes): void

  • Replace all children of node with nodes, while replacing strings in nodes with equivalent Text nodes.

    Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.

    Parameters

    • Rest ...nodes: (string | Node)[]

    Returns void

Settings

Member Visibility

Theme

On This Page