ShadowRoot

The ShadowRoot interface of the Shadow DOM API is the root node of a DOM subtree that is rendered separately from a document's main DOM tree.

MDN Reference

Properties

Link copied to clipboard

The activeElement read-only property of the Document interface returns the Element within the DOM that is receiving keyboard events such as keydown and keyup. This is usually analogous to the focused element.

Link copied to clipboard

The adoptedStyleSheets property of the Document interface is used for setting an array of constructed stylesheets to be used by the document.

Link copied to clipboard

The read-only baseURI property of the Node interface returns the absolute base URL of the document containing the node.

Link copied to clipboard

The Document.childElementCount read-only property returns the number of child elements of the document.

Link copied to clipboard

The read-only childNodes property of the Node interface returns a live NodeList of child nodes of the given element where the first child node is assigned index 0. Child nodes include elements, text and comments.

Link copied to clipboard

The read-only children property returns a live HTMLCollection which contains all of the child elements of the document upon which it was called.

Link copied to clipboard

The clonable read-only property of the ShadowRoot interface returns true if the shadow root is clonable, and false otherwise.

Link copied to clipboard

The customElementRegistry read-only property of the Document interface returns the CustomElementRegistry object associated with this document, or null if one has not been set.

Link copied to clipboard

The delegatesFocus read-only property of the ShadowRoot interface returns true if the shadow root delegates focus, and false otherwise.

Link copied to clipboard

The read-only firstChild property of the Node interface returns the node's first child in the tree, or null if the node has no children.

Link copied to clipboard

The Document.firstElementChild read-only property returns the document's first child Element, or null if there are no child elements.

Link copied to clipboard

The Document.fullscreenElement read-only property returns the Element that is currently being presented in fullscreen mode in this document, or null if fullscreen mode is not currently in use.

Link copied to clipboard

The host read-only property of the ShadowRoot returns a reference to the DOM element the ShadowRoot is attached to.

Link copied to clipboard

The innerHTML property of the ShadowRoot interface gets or sets the HTML markup to the DOM tree inside the ShadowRoot.

Link copied to clipboard

The read-only isConnected property of the Node interface returns a boolean indicating whether the node is connected (directly or indirectly) to a Document object.

Link copied to clipboard

The read-only lastChild property of the Node interface returns the last child of the node, or null if there are no child nodes.

Link copied to clipboard

The Document.lastElementChild read-only property returns the document's last child Element, or null if there are no child elements.

Link copied to clipboard

The mode read-only property of the ShadowRoot specifies its mode — either open or closed. This defines whether or not the shadow root's internal features are accessible from JavaScript.

Link copied to clipboard

The read-only nextSibling property of the Node interface returns the node immediately following the specified one in their parent's childNodes, or returns null if the specified node is the last child in the parent element.

Link copied to clipboard

The read-only nodeName property of Node returns the name of the current node as a string.

Link copied to clipboard

The read-only nodeType property of a Node interface is an integer that identifies what the node is. It distinguishes different kinds of nodes from each other, such as elements, text, and comments.

Link copied to clipboard

The nodeValue property of the Node interface returns or sets the value of the current node.

Link copied to clipboard
Link copied to clipboard
open override val ownerDocument: Document

The read-only ownerDocument property of the Node interface returns the top-level document object of the node.

Link copied to clipboard

The read-only parentElement property of Node interface returns the DOM node's parent Element, or null if the node either has no parent, or its parent isn't a DOM Element. Node.parentNode on the other hand returns any kind of parent, regardless of its type.

Link copied to clipboard

The read-only parentNode property of the Node interface returns the parent of the specified node in the DOM tree.

Link copied to clipboard

The read-only pictureInPictureElement property of the Document interface returns the Element that is currently being presented in picture-in-picture mode in this document, or null if picture-in-picture mode is not currently in use.

Link copied to clipboard

The pointerLockElement read-only property of the Document interface provides the element set as the target for mouse events while the pointer is locked. It is null if lock is pending, pointer is unlocked, or the target is in another document.

Link copied to clipboard

The read-only previousSibling property of the Node interface returns the node immediately preceding the specified one in its parent's childNodes list, or null if the specified node is the first in that list.

Link copied to clipboard

The serializable read-only property of the ShadowRoot interface returns true if the shadow root is serializable.

Link copied to clipboard

The read-only slotAssignment property of the ShadowRoot interface returns the slot assignment mode for the shadow DOM tree. Nodes are either automatically assigned (named) or manually assigned (manual). The value of this property defined using the slotAssignment option when calling Element.attachShadow().

Link copied to clipboard

The styleSheets read-only property of the Document interface returns a StyleSheetList of CSSStyleSheet objects, for stylesheets explicitly linked into or embedded in a document.

Link copied to clipboard
open override var textContent: String?

Functions

Link copied to clipboard
open fun append(vararg nodes: String)

open fun append(vararg nodes: Node)

The Document.append() method inserts a set of Node objects or strings after the last child of the document. Strings are inserted as equivalent Text nodes.

Link copied to clipboard
fun <T : Node> appendChild(node: T): T

The appendChild() method of the Node interface adds a node to the end of the list of children of a specified parent node.

Link copied to clipboard
fun cloneNode(subtree: Boolean = definedExternally): Node

The cloneNode() method of the Node interface returns a duplicate of the node on which this method was called. Its parameter controls if the subtree contained in the node is also cloned or not.

Link copied to clipboard

The compareDocumentPosition() method of the Node interface reports the position of its argument node relative to the node on which it is called.

Link copied to clipboard
fun contains(other: Node?): Boolean

The contains() method of the Node interface returns a boolean value indicating whether a node is a descendant of a given node, that is the node itself, one of its direct children (childNodes), one of the children's direct children, and so on.

Link copied to clipboard
open fun dispatchEvent(event: Event): Boolean
Link copied to clipboard

The elementFromPoint() method, available on the Document object, returns the topmost Element at the specified coordinates (relative to the viewport).

Link copied to clipboard

The elementsFromPoint() method of the Document interface returns an array of all elements at the specified coordinates (relative to the viewport). The elements are ordered from the topmost to the bottommost box of the viewport.

Link copied to clipboard

The getAnimations() method of the Document interface returns an array of all Animation objects currently in effect whose target elements are descendants of the document. This array includes CSS Animations, CSS Transitions, and Web Animations.

Link copied to clipboard
open override fun getElementById(elementId: ElementId): HTMLElement?

The getElementById() method of the DocumentFragment returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.

Link copied to clipboard
fun getHTML(options: GetHTMLOptions = definedExternally): String

The getHTML() method of the ShadowRoot interface is used to serialize a shadow root's DOM to an HTML string.

Link copied to clipboard
fun getRootNode(options: GetRootNodeOptions = definedExternally): Node

The getRootNode() method of the Node interface returns the context object's root, which optionally includes the shadow root if it is available.

Link copied to clipboard

The hasChildNodes() method of the Node interface returns a boolean value indicating whether the given Node has child nodes or not.

Link copied to clipboard
fun <T : Node> insertBefore(node: T, child: Node?): T

The insertBefore() method of the Node interface inserts a node before a reference node as a child of a specified parent node.

Link copied to clipboard

The isDefaultNamespace() method of the Node interface accepts a namespace URI as an argument. It returns a boolean value that is true if the namespace is the default namespace on the given node and false if not. The default namespace can be retrieved with Node.lookupNamespaceURI() by passing null as the argument.

Link copied to clipboard
fun isEqualNode(otherNode: Node?): Boolean

The isEqualNode() method of the Node interface tests whether two nodes are equal. Two nodes are equal when they have the same type, defining characteristics (for elements, this would be their ID, number of children, and so forth), its attributes match, and so on. The specific set of data points that must match varies depending on the types of the nodes.

Link copied to clipboard
fun isSameNode(otherNode: Node?): Boolean

The isSameNode() method of the Node interface is a legacy alias the for the === strict equality operator. That is, it tests whether two nodes are the same (in other words, whether they reference the same object).

Link copied to clipboard

The lookupNamespaceURI() method of the Node interface takes a prefix as parameter and returns the namespace URI associated with it on the given node if found (and null if not). This method's existence allows Node objects to be passed as a namespace resolver to XPathEvaluator.createExpression() and XPathEvaluator.evaluate().

Link copied to clipboard
fun lookupPrefix(namespace: String?): String?

The lookupPrefix() method of the Node interface returns a string containing the prefix for a given namespace URI, if present, and null if not. When multiple prefixes are possible, the first prefix is returned.

Link copied to clipboard
open fun moveBefore(node: Node, child: Node?)

The moveBefore() method of the Document interface moves a given Node inside the Document DOM node as a direct child, before a given reference node.

Link copied to clipboard
fun normalize()

The normalize() method of the Node interface puts the specified node and all of its sub-tree into a normalized form. In a normalized sub-tree, no text nodes in the sub-tree are empty and there are no adjacent text nodes.

Link copied to clipboard
open fun prepend(vararg nodes: String)

open fun prepend(vararg nodes: Node)

The Document.prepend() method inserts a set of Node objects or strings before the first child of the document. Strings are inserted as equivalent Text nodes.

Link copied to clipboard
open fun querySelector(selectors: String): Element?

open fun <T : Element> querySelector(selectors: TagName<T>): T?

The Document method querySelector() returns the first Element within the document that matches the specified CSS selector, or group of CSS selectors. If no matches are found, null is returned.

Link copied to clipboard
open fun querySelectorAll(selectors: String): NodeList<Element>

open fun <T : Element> querySelectorAll(selectors: TagName<T>): NodeList<T>

The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.

Link copied to clipboard
fun <T : Node> removeChild(child: T): T

The removeChild() method of the Node interface removes a child node from the DOM and returns the removed node.

Link copied to clipboard
fun <T : Node> replaceChild(node: Node, child: T): T

The replaceChild() method of the Node interface replaces a child node within the given (parent) node.

Link copied to clipboard
open fun replaceChildren()
open fun replaceChildren(vararg nodes: String)

open fun replaceChildren(vararg nodes: Node)

The Document.replaceChildren() method replaces the existing children of a Document with a specified new set of children.

Link copied to clipboard

The setHTMLUnsafe() method of the ShadowRoot interface can be used to parse HTML input into a DocumentFragment, optionally filtering out unwanted elements and attributes, and then use it to replace the existing tree in the Shadow DOM.

Link copied to clipboard