shadow-dom-utils

A set of utilities for dealing with shadow DOM.

Usage no npm install needed!

<script type="module">
  import shadowDomUtils from 'https://cdn.skypack.dev/shadow-dom-utils';
</script>

README

shadow-dom-utils

This package provides a set of useful utilities for dealing with shadow DOM, primarily for test environment situations where one might want to break encapsulation.

Install

npm i shadow-dom-utils

querySelector and querySelectorAll

Behaves in a similar way to the native querySelector but ignores shadow DOM boundaries, in that it traverses into shadow roots and continues searching within them for the given selector.

Usage

// find all elements with the class, "foo"
querySelector('.foo');

// find all elements with the class "foo" within a specific node
querySelector('.foo', node);

// pass an options object
querySelector('.foo', node, options);

Options

Both of these functions can take an options object like so:

querySelector('.foo', document, options);

The following options are supported:

{
  // If true, enables cross-boundary selector support.
  // For example, `.foo .bar` would match even if `.foo` and `.bar` are
  // in different shadow roots (but still descendant-like).
  "crossBoundary": false
}

getHost

Retrieves the host document or element of a given node.

This behaves similar to calling getRootNode() manually, but will only return a result if it is a document or a shadow-root host, meaning disconnected nodes will return null.

Usage

// get the host of a given node
getHost(node);