API
closest Focusable Node(node) static method
Return the closest focusable node that's either the node itself (if it's focusable), or the closest focusable ancestor in the composed tree.
If no focusable node is found, this returns null.
Parameters:
- node:
Node
–
Returns: HTMLElementnull
composed Ancestors(node) static method
Return the ancestors of the given node in the composed tree.
In the composed tree, the ancestor of a node assigned to a slot is that slot, not the node's DOM ancestor. The ancestor of a shadow root is its host.
Parameters:
- node:
Node
–
Returns: Iterable.
deep Contains(container, target) static method
Returns true if the first node contains the second, even if the second node is in a shadow tree.
The standard Node.contains() function does not account for Shadow DOM, and returns false if the supplied target node is sitting inside a shadow tree within the container.
Parameters:
- container:
Node
– The container to search within. - target:
Node
– The node that may be inside the container.
Returns: boolean
- True if the container contains the target node.
first Focusable Element(root) static method
Return the first focusable element in the composed tree below the given root. The composed tree includes nodes assigned to slots.
This heuristic considers only the document order of the elements below the root and whether a given element is focusable. It currently does not respect the tab sort order defined by tabindex values greater than zero.
Parameters:
- root:
Node
– the root of the tree in which to search
Returns: HTMLElementnull
- the first focusable element, or null if none
was found
forward Focus(origin, target) static method
Trap any mousedown
events on the origin
element and prevent the default
behavior from setting the focus on that element. Instead, put the focus on
the target
element (or, if the target
is not focusable, on the target's
closest focusable ancestor).
If this method is called again with the same origin
element, the old
forwarding is overridden, and focus will now go to the new target
element.
If the target
parameter is null
, focus handling will be removed from the
indicated origin
.
Parameters:
- origin:
HTMLElement
– - target:
HTMLElement|null
–
index Of Item Containing Target(items, target) static method
Search a list element for the item that contains the specified target.
When dealing with UI events (e.g., mouse clicks) that may occur in subelements inside a list item, you can use this routine to obtain the containing list item.
Parameters:
- items:
NodeList|Array.
– A list element containing a set of items - target:
Node
– A target element that may or may not be an item in the list.
Returns: number
- The index of the list child that is or contains the
indicated target node. Returns -1 if not found.
own Event(node, event) static method
Return true if the event came from within the node (or from the node itself); false otherwise.
Parameters:
- node:
Node
– The node to consider in relation to the event - event:
Event
– The event which may have been raised within/by the node
Returns: boolean
- True if the event was raised within or by the node
self And Composed Ancestors(node) static method
Returns the set that includes the given node and all of its ancestors in the composed tree. See composedAncestors for details on the latter.
Parameters:
- node:
Node
–
Returns: Iterable.
set Internal State(element, name, value) static method
Set an internal state for browsers that support custom state pseudo classes, as well as an attribute of the same name to permit state-based styling on older browsers.
When all browsers support custom state pseudo classes, we'd like to deprecate use of attributes.
Parameters:
- element:
Element
– - name:
string
– - value:
boolean
–
update Child Nodes(element, childNodes) static method
Adds or removes the element's childNodes
as necessary to match the nodes
indicated in the childNodes
parameter.
This operation is useful in cases where you maintain your own set of nodes which should be rendered as the children of some element. When you insert or remove nodes in that set, you can invoke this function to efficiently apply the new set as a delta to the existing children. Only the items in the set that have actually changed will be added or removed.
Parameters:
- element:
Element
– the element to update - childNodes:
NodeList|Array.
– the set of nodes to apply