Interface ShadowRoot

MDN Reference

interface ShadowRoot {
    activeElement: null | Element;
    adoptedStyleSheets: CSSStyleSheet[];
    ATTRIBUTE_NODE: 2;
    baseURI: string;
    CDATA_SECTION_NODE: 4;
    childElementCount: number;
    childNodes: NodeListOf<ChildNode>;
    children: HTMLCollection;
    clonable: boolean;
    COMMENT_NODE: 8;
    delegatesFocus: boolean;
    DOCUMENT_FRAGMENT_NODE: 11;
    DOCUMENT_NODE: 9;
    DOCUMENT_POSITION_CONTAINED_BY: 16;
    DOCUMENT_POSITION_CONTAINS: 8;
    DOCUMENT_POSITION_DISCONNECTED: 1;
    DOCUMENT_POSITION_FOLLOWING: 4;
    DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32;
    DOCUMENT_POSITION_PRECEDING: 2;
    DOCUMENT_TYPE_NODE: 10;
    ELEMENT_NODE: 1;
    ENTITY_NODE: 6;
    ENTITY_REFERENCE_NODE: 5;
    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;
    NOTATION_NODE: 12;
    onslotchange: null | (this: ShadowRoot, ev: Event) => any;
    ownerDocument: Document;
    parentElement: null | HTMLElement;
    parentNode: null | ParentNode;
    pictureInPictureElement: null | Element;
    pointerLockElement: null | Element;
    previousSibling: null | ChildNode;
    PROCESSING_INSTRUCTION_NODE: 7;
    serializable: boolean;
    slotAssignment: SlotAssignmentMode;
    styleSheets: StyleSheetList;
    TEXT_NODE: 3;
    textContent: null | string;
    addEventListener<K extends "slotchange">(
        type: K,
        listener: (this: ShadowRoot, ev: ShadowRootEventMap[K]) => any,
        options?: boolean | AddEventListenerOptions,
    ): void;
    addEventListener(
        type: string,
        listener: EventListenerOrEventListenerObject,
        options?: boolean | AddEventListenerOptions,
    ): void;
    append(...nodes: (string | Node)[]): void;
    appendChild<T extends Node>(node: T): T;
    cloneNode(deep?: boolean): Node;
    compareDocumentPosition(other: Node): number;
    contains(other: null | Node): boolean;
    dispatchEvent(event: Event): boolean;
    elementFromPoint(x: number, y: number): null | Element;
    elementsFromPoint(x: number, y: number): Element[];
    getAnimations(): Animation[];
    getElementById(elementId: string): null | HTMLElement;
    getHTML(options?: GetHTMLOptions): string;
    getRootNode(options?: GetRootNodeOptions): Node;
    hasChildNodes(): boolean;
    insertBefore<T extends Node>(node: T, child: null | Node): T;
    isDefaultNamespace(namespace: null | string): boolean;
    isEqualNode(otherNode: null | Node): boolean;
    isSameNode(otherNode: null | Node): boolean;
    lookupNamespaceURI(prefix: null | string): null | string;
    lookupPrefix(namespace: null | string): null | string;
    normalize(): void;
    prepend(...nodes: (string | Node)[]): void;
    querySelector<K extends keyof HTMLElementTagNameMap>(
        selectors: K,
    ): null | HTMLElementTagNameMap[K];
    querySelector<K extends keyof SVGElementTagNameMap>(
        selectors: K,
    ): null | SVGElementTagNameMap[K];
    querySelector<K extends keyof MathMLElementTagNameMap>(
        selectors: K,
    ): null | MathMLElementTagNameMap[K];
    querySelector<K extends keyof HTMLElementDeprecatedTagNameMap>(
        selectors: K,
    ): null | HTMLElementDeprecatedTagNameMap[K];
    querySelector<E extends Element = Element>(selectors: string): null | E;
    querySelectorAll<K extends keyof HTMLElementTagNameMap>(
        selectors: K,
    ): NodeListOf<HTMLElementTagNameMap[K]>;
    querySelectorAll<K extends keyof SVGElementTagNameMap>(
        selectors: K,
    ): NodeListOf<SVGElementTagNameMap[K]>;
    querySelectorAll<K extends keyof MathMLElementTagNameMap>(
        selectors: K,
    ): NodeListOf<MathMLElementTagNameMap[K]>;
    querySelectorAll<K extends keyof HTMLElementDeprecatedTagNameMap>(
        selectors: K,
    ): NodeListOf<HTMLElementDeprecatedTagNameMap[K]>;
    querySelectorAll<E extends Element = Element>(
        selectors: string,
    ): NodeListOf<E>;
    removeChild<T extends Node>(child: T): T;
    removeEventListener<K extends "slotchange">(
        type: K,
        listener: (this: ShadowRoot, ev: ShadowRootEventMap[K]) => any,
        options?: boolean | EventListenerOptions,
    ): void;
    removeEventListener(
        type: string,
        listener: EventListenerOrEventListenerObject,
        options?: boolean | EventListenerOptions,
    ): void;
    replaceChild<T extends Node>(node: Node, child: T): T;
    replaceChildren(...nodes: (string | Node)[]): void;
    setHTMLUnsafe(html: string): void;
}

Hierarchy (View Summary)

Properties

activeElement adoptedStyleSheets ATTRIBUTE_NODE baseURI CDATA_SECTION_NODE childElementCount childNodes children clonable COMMENT_NODE delegatesFocus 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 firstChild firstElementChild fullscreenElement host innerHTML isConnected lastChild lastElementChild mode nextSibling nodeName nodeType nodeValue NOTATION_NODE onslotchange ownerDocument parentElement parentNode pictureInPictureElement pointerLockElement previousSibling PROCESSING_INSTRUCTION_NODE serializable slotAssignment styleSheets TEXT_NODE textContent

Methods

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

Properties

ReadonlyactiveElement

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.

MDN Reference

adoptedStyleSheets

adoptedStyleSheets: CSSStyleSheet[]

MDN Reference

ReadonlyATTRIBUTE_NODE

ATTRIBUTE_NODE: 2

ReadonlybaseURI

baseURI: string

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

MDN Reference

ReadonlyCDATA_SECTION_NODE

CDATA_SECTION_NODE: 4

node is a CDATASection node.

ReadonlychildElementCount

childElementCount: number

MDN Reference

ReadonlychildNodes

childNodes: NodeListOf<ChildNode>

Returns the children.

MDN Reference

Readonlychildren

children: HTMLCollection

Returns the child elements.

MDN Reference

Readonlyclonable

clonable: boolean

MDN Reference

ReadonlyCOMMENT_NODE

COMMENT_NODE: 8

node is a Comment node.

ReadonlydelegatesFocus

delegatesFocus: boolean

MDN Reference

ReadonlyDOCUMENT_FRAGMENT_NODE

DOCUMENT_FRAGMENT_NODE: 11

node is a DocumentFragment node.

ReadonlyDOCUMENT_NODE

DOCUMENT_NODE: 9

node is a document.

ReadonlyDOCUMENT_POSITION_CONTAINED_BY

DOCUMENT_POSITION_CONTAINED_BY: 16

Set when other is a descendant of node.

ReadonlyDOCUMENT_POSITION_CONTAINS

DOCUMENT_POSITION_CONTAINS: 8

Set when other is an ancestor of node.

ReadonlyDOCUMENT_POSITION_DISCONNECTED

DOCUMENT_POSITION_DISCONNECTED: 1

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

ReadonlyDOCUMENT_POSITION_FOLLOWING

DOCUMENT_POSITION_FOLLOWING: 4

Set when other is following node.

ReadonlyDOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC

DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32

ReadonlyDOCUMENT_POSITION_PRECEDING

DOCUMENT_POSITION_PRECEDING: 2

Set when other is preceding node.

ReadonlyDOCUMENT_TYPE_NODE

DOCUMENT_TYPE_NODE: 10

node is a doctype.

ReadonlyELEMENT_NODE

ELEMENT_NODE: 1

node is an element.

ReadonlyENTITY_NODE

ENTITY_NODE: 6

ReadonlyENTITY_REFERENCE_NODE

ENTITY_REFERENCE_NODE: 5

ReadonlyfirstChild

firstChild: null | ChildNode

Returns the first child.

MDN Reference

ReadonlyfirstElementChild

firstElementChild: null | Element

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

MDN Reference

ReadonlyfullscreenElement

fullscreenElement: null | Element

Returns document's fullscreen element.

MDN Reference

Readonlyhost

host: Element

MDN Reference

innerHTML

innerHTML: string

MDN Reference

ReadonlyisConnected

isConnected: boolean

Returns true if node is connected and false otherwise.

MDN Reference

ReadonlylastChild

lastChild: null | ChildNode

Returns the last child.

MDN Reference

ReadonlylastElementChild

lastElementChild: null | Element

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

MDN Reference

Readonlymode

mode: ShadowRootMode

MDN Reference

ReadonlynextSibling

nextSibling: null | ChildNode

Returns the next sibling.

MDN Reference

ReadonlynodeName

nodeName: string

Returns a string appropriate for the type of node.

MDN Reference

ReadonlynodeType

nodeType: number

Returns the type of node.

MDN Reference

nodeValue

nodeValue: null | string

MDN Reference

ReadonlyNOTATION_NODE

NOTATION_NODE: 12

onslotchange

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

ReadonlyownerDocument

ownerDocument: Document

Returns the node document. Returns null for documents.

MDN Reference

ReadonlyparentElement

parentElement: null | HTMLElement

Returns the parent element.

MDN Reference

ReadonlyparentNode

parentNode: null | ParentNode

Returns the parent.

MDN Reference

ReadonlypictureInPictureElement

pictureInPictureElement: null | Element

MDN Reference

ReadonlypointerLockElement

pointerLockElement: null | Element

MDN Reference

ReadonlypreviousSibling

previousSibling: null | ChildNode

Returns the previous sibling.

MDN Reference

ReadonlyPROCESSING_INSTRUCTION_NODE

PROCESSING_INSTRUCTION_NODE: 7

node is a ProcessingInstruction node.

Readonlyserializable

serializable: boolean

MDN Reference

ReadonlyslotAssignment

slotAssignment: SlotAssignmentMode

MDN Reference

ReadonlystyleSheets

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.

MDN Reference

ReadonlyTEXT_NODE

TEXT_NODE: 3

node is a Text node.

textContent

textContent: null | string

MDN Reference

Methods

addEventListener

  • addEventListener<K extends "slotchange">(
        type: K,
        listener: (this: ShadowRoot, ev: ShadowRootEventMap[K]) => any,
        options?: boolean | AddEventListenerOptions,
    ): void

  • Throws a "NotSupportedError" DOMException if context object is a shadow root.

    Type Parameters

    • K extends "slotchange"

    Parameters

    Returns void

  • addEventListener(
        type: string,
        listener: EventListenerOrEventListenerObject,
        options?: boolean | AddEventListenerOptions,
    ): void

  • Appends an event listener for events whose type attribute value is type. The callback argument sets the callback that will be invoked when the event is dispatched.

    The options argument sets listener-specific options. For compatibility this can be a boolean, in which case the method behaves exactly as if the value was specified as options's capture.

    When set to true, options's capture prevents callback from being invoked when the event's eventPhase attribute value is BUBBLING_PHASE. When false (or not present), callback will not be invoked when event's eventPhase attribute value is CAPTURING_PHASE. Either way, callback will be invoked if event's eventPhase attribute value is AT_TARGET.

    When set to true, options's passive indicates that the callback will not cancel the event by invoking preventDefault(). This is used to enable performance optimizations described in § 2.8 Observing event listeners.

    When set to true, options's once indicates that the callback will only be invoked once after which the event listener will be removed.

    If an AbortSignal is passed for options's signal, then the event listener will be removed when signal is aborted.

    The event listener is appended to target's event listener list and is not appended if it has the same type, callback, and capture.

    MDN Reference

    Parameters

    Returns void

append

  • append(...nodes: (string | Node)[]): 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.

    MDN Reference

    Parameters

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

    Returns void

appendChild

cloneNode

  • cloneNode(deep?: boolean): Node

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

    MDN Reference

    Parameters

    • Optionaldeep: boolean

    Returns Node

compareDocumentPosition

contains

  • contains(other: null | Node): boolean

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

    MDN Reference

    Parameters

    Returns boolean

dispatchEvent

  • dispatchEvent(event: 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.

    MDN Reference

    Parameters

    • event: Event

    Returns boolean

elementFromPoint

  • elementFromPoint(x: number, y: number): null | Element

  • Returns the element for the specified x coordinate and the specified y coordinate.

    Parameters

    • x: number

      The x-offset

    • y: number

      The y-offset

    Returns null | Element

elementsFromPoint

getAnimations

getElementById

getHTML

getRootNode

hasChildNodes

insertBefore

isDefaultNamespace

isEqualNode

  • isEqualNode(otherNode: null | Node): boolean

  • Returns whether node and otherNode have the same properties.

    MDN Reference

    Parameters

    • otherNode: null | Node

    Returns boolean

isSameNode

lookupNamespaceURI

lookupPrefix

  • lookupPrefix(namespace: null | string): null | string

  • MDN Reference

    Parameters

    • namespace: null | string

    Returns null | string

normalize

  • normalize(): void

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

    MDN Reference

    Returns void

prepend

  • prepend(...nodes: (string | Node)[]): 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.

    MDN Reference

    Parameters

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

    Returns void

querySelector

querySelectorAll

removeChild

removeEventListener

replaceChild

replaceChildren

  • replaceChildren(...nodes: (string | Node)[]): 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.

    MDN Reference

    Parameters

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

    Returns void

setHTMLUnsafe

  • setHTMLUnsafe(html: string): void

  • MDN Reference

    Parameters

    • html: string

    Returns void

Settings

Member Visibility

On This Page

Properties
Methods