From 685a906b939451977fe3edb6e6646a921ff450af Mon Sep 17 00:00:00 2001
From: Stefan Cameron <stefan@stefcameron.com>
Date: Wed, 20 Apr 2022 18:01:18 -0500
Subject: [PATCH] Shadow DOM support (v5.3.0) (#570)

* chore(dev): declarative shadow root test fixtures

- new development shadow-root-utils
- refactor setupFixture to render using new utils
- refactor current shadow dom tests to use declarative root
- debug page renders shadow root fixtures correctly

* feat: separate radio light/shadow dom groups

* feat: detect display across shadow boundaries

* feat: scan through shadow boundary

- iterate down dom instead of query when getShadowRoot is provided
- new candidate list/tree format with scoped lists

* chore(types): added getShadowDom to types

* fix: type of getShadowRoot option

* test: add test to locate tabbable host

* feat: slot elements are not focusable/tabbable

* chore: added some jsdocs

* refactor: modernize syntax

- as requested in PR

* Prepare for 5.3.0-beta.0

* 5.3.0-beta.0

* Adjusting code after #604 and comments

* Disable shadow DOM for isFocusable/isTabbable if getShadowRoot not given

This goes along with disabling it for `tabbable()` and `focusable()`
when the option isn't given.

* Clarify getShadowRoot must be set to enable shadow DOM support

* Add support for `getShadowRoot: true`

Note this is the equivalent of `getShadowRoot: () => false` which
simply enables shadow DOM support for all open shadows.

* Prepare for v5.3.0-beta.1

* 5.3.0-beta.1

* Add prepublishOnly script for manual publishing

* fix(index.js) The tabIndex of audio, video and details was left to the default if set to some NaN (#610)

* fix(index.js) The tabIndex of contentEditable elements was assumed to be zero in any case, not only in the case it was not specifically set.

* Simplified and optimized 'getTabIndex'.

* Made better use of short-circuit evaluation in 'isNodeMatchingSelectorTabbable', reducing the chances to call the computationally expensive 'isNodeMatchingSelectorFocusable'.

* (Re)Added 'isScope' parameter to 'getTabIndex'. This parameter wasn't present in the master branch, so I lost it in the rebase process.

* Added tests for a `contenteditable` with negative tab index.

* Fixed bug, now the getTabIndex can return 0 not only when the tabindex is not explicitly set, but also when is set to a value that gives NaN when parsed as integer (which would have been resulted in the default browser tabIndex, as if the tabindex wasn't set at all). Also added test for the case an element has a tab index that can't be turned into an integer.

* Added changeset, added entry in CHANGELOG.md and wrote more tests.

* Be consistent with asterisks

* Sync package.json/yarn.lock with beta-530 base branch

Co-authored-by: Stefan Cameron <stefan@stefcameron.com>

* [#632] Add test for radios in a form (#638)

Can't repro the issue, but might as well keep the test since we
seem to like fieldsets but not forms for some reason.

* Add changeset for shadow root support

Co-authored-by: Ido Rosenthal <idoros@gmail.com>
Co-authored-by: DaviDevMod <98312056+DaviDevMod@users.noreply.github.com>
---
 .changeset/happy-zebras-attend.md     |   5 +
 .changeset/shadow-root.md             |   7 +
 CHANGELOG.md                          |   9 +
 README.md                             |  23 +-
 cypress/plugins/index.js              |   2 +
 index.d.ts                            |   1 +
 package.json                          |   5 +-
 src/index.js                          | 305 ++++++++++++---
 test/debug.js                         |  36 +-
 test/e2e/e2e.helpers.js               |  28 +-
 test/e2e/focusable.e2e.js             |  30 +-
 test/e2e/isFocusable.e2e.js           |  38 +-
 test/e2e/isTabbable.e2e.js            |  34 +-
 test/e2e/shadow-dom.e2e.js            | 541 ++++++++++++++++++++++++++
 test/e2e/tabbable.e2e.js              |  35 +-
 test/fixtures/basic.html              |   8 +
 test/fixtures/displayed.html          |  13 +-
 test/fixtures/index.js                |  12 +
 test/fixtures/radio.html              |  18 +-
 test/fixtures/shadow-dom-display.html |  36 ++
 test/fixtures/shadow-dom-query.html   | 164 ++++++++
 test/fixtures/shadow-dom-radio.html   |  16 +
 test/fixtures/shadow-dom.html         |  14 +-
 test/shadow-root-utils.js             |  76 ++++
 24 files changed, 1319 insertions(+), 137 deletions(-)
 create mode 100644 .changeset/happy-zebras-attend.md
 create mode 100644 .changeset/shadow-root.md
 create mode 100644 test/e2e/shadow-dom.e2e.js
 create mode 100644 test/fixtures/shadow-dom-display.html
 create mode 100644 test/fixtures/shadow-dom-query.html
 create mode 100644 test/fixtures/shadow-dom-radio.html
 create mode 100644 test/shadow-root-utils.js

diff --git a/.changeset/happy-zebras-attend.md b/.changeset/happy-zebras-attend.md
new file mode 100644
index 00000000..43e1e08b
--- /dev/null
+++ b/.changeset/happy-zebras-attend.md
@@ -0,0 +1,5 @@
+---
+'tabbable': patch
+---
+
+Fixed a bug in `getTabIndex`: the tab index of `<audio>`, `<video>` and `<details>` was left to the browser default if explicitly set to a value that couldn't be parsed as integer, leading to inconsistent behavior across browsers. Also slightly modified the function's logic to make it more efficient. Finally added tests to cover the fix.
diff --git a/.changeset/shadow-root.md b/.changeset/shadow-root.md
new file mode 100644
index 00000000..b85a3bb8
--- /dev/null
+++ b/.changeset/shadow-root.md
@@ -0,0 +1,7 @@
+---
+'tabbable': minor
+---
+
+Adds new Shadow DOM support (must be explicitly enabled using the new `getShadowRoot` option).
+    - When enabled, supports open shadows by default, and can support closed shadows if the option is a function that returns the shadow for a given node. See documentation for more information.
+    - Includes all updates from `5.3.0-beta.0` and `5.3.0-beta.1` releases.
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2f5f5010..b57da081 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,14 @@
 # Changelog
 
+## 5.3.0-beta.1
+
+- Add support for setting `getShadowRoot: true` as an easy way to simply *enable* shadow DOM support. This is the equivalent of setting `getShadowRoot: () => false`, which means tabbable will find nodes in **open** shadow roots only.
+
+## 5.3.0-beta.0
+
+- Includes new Shadow DOM support for open shadows by default
+- Includes a new `getShadowRoot()` configuration option, enabling support for closed shadows
+
 ## 5.2.1
 
 ### Patch Changes
diff --git a/README.md b/README.md
index d97af860..6d8f69aa 100644
--- a/README.md
+++ b/README.md
@@ -91,6 +91,25 @@ Type: `full` | `non-zero-area` | `none` . Default: `full`.
 
 Configures how to check if an element is displayed, see ["Display check"](#display-check) below.
 
+##### getShadowRoot
+
+By default, tabbable overlooks (i.e. does not consider) __all__ elements contained in shadow DOMs (whether open or closed). This has been the behavior since the beginning.
+
+Setting this option to a _truthy_ value enables Shadow DOM support, which means tabbable will consider elements _inside_ web components as candidates, both open (automatically) and closed (provided this function returns the shadow root).
+
+Type: `boolean | (node: FocusableElement) => ShadowRoot | boolean | undefined`
+
+- `boolean`:
+    - `true` simply enables shadow DOM support for any __open__ shadow roots, but never presumes there is an undisclosed shadow. This is the equivalent of setting `getShadowRoot: () => false`
+    - `false` (default) disables shadow DOM support.
+- `function`:
+    - `node` will be a descendent of the `rootNode` given to `tabbable()`, `isTabbable()`, `focusable()`, or `isFocusable()`.
+    - Returns: The node's `ShadowRoot` if available, `true` indicating a `ShadowRoot` is attached but not available (i.e. "undisclosed"), or a _falsy_ value indicating there is no shadow attached to the node.
+
+> If set to a function, and if it returns `true`, Tabbable assumes a closed `ShadowRoot` is attached and will treat the node as a scope, iterating its children for additional tabbable/focusable candidates as though it was looking inside the shadow, but not. This will get tabbing order _closer_ to -- but not necessarily the same as -- browser order.
+>
+> Returning `true` from a function will also inform how the node's visibility check is done, causing tabbable to use the __non-zero-area__ [Display Check](#display-check) when determining if it's visible, and so tabbable/focusable.
+
 ### isTabbable
 
 ```js
@@ -173,8 +192,8 @@ To reliably check if an element is tabbable/focusable, Tabbable defaults to the
 
 The `displayCheck` configuration accepts the following options:
 
-- `full`: (default) Most reliably resemble browser behavior, this option checks that an element is displayed and all of his ancestors are displayed as well (Notice that this doesn't exclude `visibility: hidden` or elements with zero size). This check is by far the slowest option as it might cause layout reflow.
-- `non-zero-area`: This option checks display under the assumption that elements that are not displayed have zero area (width AND height equals zero). While not keeping true to browser behavior, this option is much less intensive then the `full` option and better for accessibility as zero-size elements with focusable content are considered a strong accessibility anti-pattern.
+- `full`: (default) Most reliably resembling browser behavior, this option checks that an element is displayed and all of his ancestors are displayed as well (notice that this doesn't exclude `visibility: hidden` or elements with zero size). This check is by far the slowest option as it will cause layout reflow.
+- `non-zero-area`: This option checks display under the assumption that elements that are not displayed have zero area (width AND height equals zero). While not keeping true to browser behavior, this option may be less intensive than the `full` option, and better for accessibility, as zero-size elements with focusable content are considered a strong accessibility anti-pattern.
 - `none`: This completely opts out of the display check. **This option is not recommended**, as it might return elements that are not displayed, and as such not tabbable/focusable and can break accessibility. Make sure you know which elements in your DOM are not displayed and can filter them out yourself before using this option.
 
 **_Feedback and contributions more than welcome!_**
diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js
index 44ec404b..208ed94e 100644
--- a/cypress/plugins/index.js
+++ b/cypress/plugins/index.js
@@ -26,12 +26,14 @@ module.exports = (on, config) => {
       require('@cypress/code-coverage/use-browserify-istanbul')
     );
   }
+
   // fetch fixtures
   on('task', {
     getFixtures() {
       return require('../../test/fixtures/index');
     },
   });
+
   // IMPORTANT to return the config object
   // with the any changed environment variables
   return config;
diff --git a/index.d.ts b/index.d.ts
index a71eee72..38beccbe 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -2,6 +2,7 @@ type FocusableElement = HTMLElement | SVGElement;
 
 export type CheckOptions = {
   displayCheck?: 'full' | 'non-zero-area' | 'none';
+  getShadowRoot?: boolean | ((node: FocusableElement) => ShadowRoot | boolean | undefined);
 };
 
 export type TabbableOptions = {
diff --git a/package.json b/package.json
index 2508753b..d266f801 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tabbable",
-  "version": "5.2.1",
+  "version": "5.3.0-beta.1",
   "description": "Returns an array of all tabbable DOM nodes within a containing node.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -31,10 +31,11 @@
     "test": "yarn format:check && yarn lint && yarn test:types && yarn test:unit && yarn test:e2e",
     "test:types": "tsc index.d.ts",
     "test:unit": "jest",
-    "test:e2e": "cypress run",
+    "test:e2e": "ELECTRON_ENABLE_LOGGING=1 cypress run",
     "test:e2e:dev": "cypress open",
     "test:coverage": "cypress run --env coverage=true",
     "prepare": "yarn build",
+    "prepublishOnly": "yarn test && yarn build",
     "release": "yarn build && changeset publish"
   },
   "repository": {
diff --git a/src/index.js b/src/index.js
index 14cb873f..d3d15f6c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,7 +4,7 @@ const candidateSelectors = [
   'textarea',
   'a[href]',
   'button',
-  '[tabindex]',
+  '[tabindex]:not(slot)',
   'audio[controls]',
   'video[controls]',
   '[contenteditable]:not([contenteditable="false"])',
@@ -13,13 +13,25 @@ const candidateSelectors = [
 ];
 const candidateSelector = /* #__PURE__ */ candidateSelectors.join(',');
 
-const matches =
-  typeof Element === 'undefined'
-    ? function () {}
-    : Element.prototype.matches ||
-      Element.prototype.msMatchesSelector ||
-      Element.prototype.webkitMatchesSelector;
-
+const NoElement = typeof Element === 'undefined';
+
+const matches = NoElement
+  ? function () {}
+  : Element.prototype.matches ||
+    Element.prototype.msMatchesSelector ||
+    Element.prototype.webkitMatchesSelector;
+
+const getRootNode =
+  !NoElement && Element.prototype.getRootNode
+    ? (element) => element.getRootNode()
+    : (element) => element.ownerDocument;
+
+/**
+ * @param {Element} el container to check in
+ * @param {boolean} includeContainer add container to check
+ * @param {(node: Element) => boolean} filter filter candidates
+ * @returns {Element[]}
+ */
 const getCandidates = function (el, includeContainer, filter) {
   let candidates = Array.prototype.slice.apply(
     el.querySelectorAll(candidateSelector)
@@ -31,35 +43,125 @@ const getCandidates = function (el, includeContainer, filter) {
   return candidates;
 };
 
-const isContentEditable = function (node) {
-  return node.contentEditable === 'true';
-};
-
-const getTabindex = function (node) {
-  const tabindexAttr = parseInt(node.getAttribute('tabindex'), 10);
-
-  if (!isNaN(tabindexAttr)) {
-    return tabindexAttr;
-  }
+/**
+ * @callback GetShadowRoot
+ * @param {Element} element to check for shadow root
+ * @returns {ShadowRoot|boolean} ShadowRoot if available or boolean indicating if a shadowRoot is attached but not available.
+ */
+
+/**
+ * @typedef {Object} CandidatesScope
+ * @property {Element} scope contains inner candidates
+ * @property {Element[]} candidates
+ */
+
+/**
+ * @typedef {Object} IterativeOptions
+ * @property {GetShadowRoot|boolean} getShadowRoot true if shadow support is enabled; falsy if not;
+ *  if a function, implies shadow support is enabled and either returns the shadow root of an element
+ *  or a boolean stating if it has an undisclosed shadow root
+ * @property {(node: Element) => boolean} filter filter candidates
+ * @property {boolean} flatten if true then result will flatten any CandidatesScope into the returned list
+ */
+
+/**
+ * @param {Element[]} elements list of element containers to match candidates from
+ * @param {boolean} includeContainer add container list to check
+ * @param {IterativeOptions} options
+ * @returns {Array.<Element|CandidatesScope>}
+ */
+const getCandidatesIteratively = function (
+  elements,
+  includeContainer,
+  options
+) {
+  const candidates = [];
+  const elementsToCheck = Array.from(elements);
+  while (elementsToCheck.length) {
+    const element = elementsToCheck.shift();
+    if (element.tagName === 'SLOT') {
+      // add shadow dom slot scope (slot itself cannot be focusable)
+      const assigned = element.assignedElements();
+      const content = assigned.length ? assigned : element.children;
+      const nestedCandidates = getCandidatesIteratively(content, true, options);
+      if (options.flatten) {
+        candidates.push(...nestedCandidates);
+      } else {
+        candidates.push({
+          scope: element,
+          candidates: nestedCandidates,
+        });
+      }
+    } else {
+      // check candidate element
+      const validCandidate = matches.call(element, candidateSelector);
+      if (
+        validCandidate &&
+        options.filter(element) &&
+        (includeContainer || !elements.includes(element))
+      ) {
+        candidates.push(element);
+      }
 
-  // Browsers do not return `tabIndex` correctly for contentEditable nodes;
-  // so if they don't have a tabindex attribute specifically set, assume it's 0.
-  if (isContentEditable(node)) {
-    return 0;
+      // iterate over shadow content if possible
+      const shadowRoot =
+        element.shadowRoot ||
+        // check for an undisclosed shadow
+        (typeof options.getShadowRoot === 'function' &&
+          options.getShadowRoot(element));
+
+      if (shadowRoot) {
+        // add shadow dom scope IIF a shadow root node was given; otherwise, an undisclosed
+        //  shadow exists, so look at light dom children as fallback BUT create a scope for any
+        //  child candidates found because they're likely slotted elements (elements that are
+        //  children of the web component element (which has the shadow), in the light dom, but
+        //  slotted somewhere _inside_ the undisclosed shadow) -- the scope is created below,
+        //  _after_ we return from this recursive call
+        const nestedCandidates = getCandidatesIteratively(
+          shadowRoot === true ? element.children : shadowRoot.children,
+          true,
+          options
+        );
+
+        if (options.flatten) {
+          candidates.push(...nestedCandidates);
+        } else {
+          candidates.push({
+            scope: element,
+            candidates: nestedCandidates,
+          });
+        }
+      } else {
+        // there's not shadow so just dig into the element's (light dom) children
+        //  __without__ giving the element special scope treatment
+        elementsToCheck.unshift(...element.children);
+      }
+    }
   }
+  return candidates;
+};
 
-  // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
-  //  `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
-  //  yet they are still part of the regular tab order; in FF, they get a default
-  //  `tabIndex` of 0; since Chrome still puts those elements in the regular tab
-  //  order, consider their tab index to be 0.
-  if (
-    (node.nodeName === 'AUDIO' ||
-      node.nodeName === 'VIDEO' ||
-      node.nodeName === 'DETAILS') &&
-    node.getAttribute('tabindex') === null
-  ) {
-    return 0;
+const getTabindex = function (node, isScope) {
+  if (node.tabIndex < 0) {
+    // in Chrome, <details/>, <audio controls/> and <video controls/> elements get a default
+    // `tabIndex` of -1 when the 'tabindex' attribute isn't specified in the DOM,
+    // yet they are still part of the regular tab order; in FF, they get a default
+    // `tabIndex` of 0; since Chrome still puts those elements in the regular tab
+    // order, consider their tab index to be 0.
+    // Also browsers do not return `tabIndex` correctly for contentEditable nodes;
+    // so if they don't have a tabindex attribute specifically set, assume it's 0.
+    //
+    // isScope is positive for custom element with shadow root or slot that by default
+    // have tabIndex -1, but need to be sorted by document order in order for their
+    // content to be inserted in the correct position
+    if (
+      (isScope ||
+        /^(AUDIO|VIDEO|DETAILS)$/.test(node.tagName) ||
+        node.isContentEditable) &&
+      isNaN(parseInt(node.getAttribute('tabindex'), 10))
+    ) {
+      return 0;
+    }
   }
 
   return node.tabIndex;
@@ -100,8 +202,7 @@ const isTabbableRadio = function (node) {
   if (!node.name) {
     return true;
   }
-  const radioScope = node.form || node.ownerDocument;
-
+  const radioScope = node.form || getRootNode(node);
   const queryRadios = function (name) {
     return radioScope.querySelectorAll(
       'input[type="radio"][name="' + name + '"]'
@@ -140,7 +241,11 @@ const isNonTabbableRadio = function (node) {
   return isRadio(node) && !isTabbableRadio(node);
 };
 
-const isHidden = function (node, displayCheck) {
+const isZeroArea = function (node) {
+  const { width, height } = node.getBoundingClientRect();
+  return width === 0 && height === 0;
+};
+const isHidden = function (node, { displayCheck, getShadowRoot }) {
   if (getComputedStyle(node).visibility === 'hidden') {
     return true;
   }
@@ -150,11 +255,49 @@ const isHidden = function (node, displayCheck) {
   if (matches.call(nodeUnderDetails, 'details:not([open]) *')) {
     return true;
   }
+
   if (!displayCheck || displayCheck === 'full') {
+    if (typeof getShadowRoot === 'function') {
+      // figure out if we should consider the node to be in an undisclosed shadow and use the
+      //  'non-zero-area' fallback
+      const originalNode = node;
+      while (node) {
+        const parentElement = node.parentElement;
+        const rootNode = getRootNode(node);
+        if (
+          parentElement &&
+          !parentElement.shadowRoot &&
+          getShadowRoot(parentElement) === true // check if there's an undisclosed shadow
+        ) {
+          // node has an undisclosed shadow which means we can only treat it as a black box, so we
+          //  fall back to a non-zero-area test
+          return isZeroArea(node);
+        } else if (node.assignedSlot) {
+          // iterate up slot
+          node = node.assignedSlot;
+        } else if (!parentElement && rootNode !== node.ownerDocument) {
+          // cross shadow boundary
+          node = rootNode.host;
+        } else {
+          // iterate up normal dom
+          node = parentElement;
+        }
+      }
+      node = originalNode;
+    }
+    // else, `getShadowRoot` might be true, but all that does is enable shadow DOM support
+    //  (i.e. it does not also presume that all nodes might have undisclosed shadows); or
+    //  it might be a falsy value, which means shadow DOM support is disabled
+
+    // didn't find it sitting in an undisclosed shadow (or shadows are disabled) so now we
+    //  can just test to see if it would normally be visible or not
+    // this works wherever the node is: if there's at least one client rect, it's
+    //  somehow displayed; it also covers the CSS 'display: contents' case where the
+    //  node itself is hidden in place of its contents; and there's no need to search
+    //  up the hierarchy either
     return !node.getClientRects().length;
   } else if (displayCheck === 'non-zero-area') {
-    const { width, height } = node.getBoundingClientRect();
-    return width === 0 && height === 0;
+    return isZeroArea(node);
   }
 
   return false;
@@ -197,7 +340,7 @@ const isNodeMatchingSelectorFocusable = function (options, node) {
   if (
     node.disabled ||
     isHiddenInput(node) ||
-    isHidden(node, options.displayCheck) ||
+    isHidden(node, options) ||
     // For a details element with a summary, the summary element gets the focus
     isDetailsWithSummary(node) ||
     isDisabledFromFieldset(node)
@@ -209,56 +352,90 @@ const isNodeMatchingSelectorFocusable = function (options, node) {
 
 const isNodeMatchingSelectorTabbable = function (options, node) {
   if (
-    !isNodeMatchingSelectorFocusable(options, node) ||
     isNonTabbableRadio(node) ||
-    getTabindex(node) < 0
+    getTabindex(node) < 0 ||
+    !isNodeMatchingSelectorFocusable(options, node)
   ) {
     return false;
   }
   return true;
 };
 
-const tabbable = function (el, options) {
-  options = options || {};
-
+/**
+ * @param {Array.<Element|CandidatesScope>} candidates
+ * @returns Element[]
+ */
+const sortByOrder = function (candidates) {
   const regularTabbables = [];
   const orderedTabbables = [];
-
-  const candidates = getCandidates(
-    el,
-    options.includeContainer,
-    isNodeMatchingSelectorTabbable.bind(null, options)
-  );
-
-  candidates.forEach(function (candidate, i) {
-    const candidateTabindex = getTabindex(candidate);
+  candidates.forEach(function (item, i) {
+    const isScope = !!item.scope;
+    const element = isScope ? item.scope : item;
+    const candidateTabindex = getTabindex(element, isScope);
+    const elements = isScope ? sortByOrder(item.candidates) : element;
     if (candidateTabindex === 0) {
-      regularTabbables.push(candidate);
+      isScope
+        ? regularTabbables.push(...elements)
+        : regularTabbables.push(element);
     } else {
       orderedTabbables.push({
         documentOrder: i,
         tabIndex: candidateTabindex,
-        node: candidate,
+        item: item,
+        isScope: isScope,
+        content: elements,
       });
     }
   });
 
-  const tabbableNodes = orderedTabbables
+  return orderedTabbables
     .sort(sortOrderedTabbables)
-    .map((a) => a.node)
+    .reduce((acc, sortable) => {
+      sortable.isScope
+        ? acc.push(...sortable.content)
+        : acc.push(sortable.content);
+      return acc;
+    }, [])
     .concat(regularTabbables);
+};
 
-  return tabbableNodes;
+const tabbable = function (el, options) {
+  options = options || {};
+
+  let candidates;
+  if (options.getShadowRoot) {
+    candidates = getCandidatesIteratively([el], options.includeContainer, {
+      filter: isNodeMatchingSelectorTabbable.bind(null, options),
+      flatten: false,
+      getShadowRoot: options.getShadowRoot,
+    });
+  } else {
+    candidates = getCandidates(
+      el,
+      options.includeContainer,
+      isNodeMatchingSelectorTabbable.bind(null, options)
+    );
+  }
+  return sortByOrder(candidates);
 };
 
 const focusable = function (el, options) {
   options = options || {};
 
-  const candidates = getCandidates(
-    el,
-    options.includeContainer,
-    isNodeMatchingSelectorFocusable.bind(null, options)
-  );
+  let candidates;
+  if (options.getShadowRoot) {
+    candidates = getCandidatesIteratively([el], options.includeContainer, {
+      filter: isNodeMatchingSelectorFocusable.bind(null, options),
+      flatten: true,
+      getShadowRoot: options.getShadowRoot,
+    });
+  } else {
+    candidates = getCandidates(
+      el,
+      options.includeContainer,
+      isNodeMatchingSelectorFocusable.bind(null, options)
+    );
+  }
 
   return candidates;
 };
diff --git a/test/debug.js b/test/debug.js
index 1a0cd32b..03f2c2b7 100644
--- a/test/debug.js
+++ b/test/debug.js
@@ -1,5 +1,5 @@
-// eslint-disable-next-line no-unused-vars -- we don't use shadow-dom on purpose
-const { 'shadow-dom': _, ...testCases } = require('./fixtures');
+const { ...testCases } = require('./fixtures');
+const { appendHTMLWithShadowRoots } = require('./shadow-root-utils');
 global.tabbable = require('../dist/index.js');
 
 let root;
@@ -12,14 +12,38 @@ for (const key in testCases) {
   content = '<h2>' + key + '</h2>';
   content += testCases[key];
   root.id = key;
-  root.innerHTML = content;
+  appendHTMLWithShadowRoots(root, content);
   document.body.appendChild(root);
 }
 
-document.body.addEventListener('focusin', (event) => {
+// listen to nested shadow dom focus
+function onFocusIn({ target }) {
+  // collect nested focused elements
+  const focusContext = [target];
+  while (target && (target.shadowRoot || target.closedShadowRoot)) {
+    const shadowRoot = target.shadowRoot || target.closedShadowRoot;
+    target = shadowRoot.activeElement;
+    if (target) {
+      focusContext.push(target);
+    }
+  }
+  // listen to inner shadow dom blur
+  // in order to log movement within shadow dom
+  if (focusContext.length > 1) {
+    const onBlur = (event) => {
+      event.target.removeEventListener('blur', onBlur);
+      setTimeout(() => {
+        if (event.relatedTarget !== document.activeElement) {
+          onFocusIn({ target: document.activeElement });
+        }
+      }, 10);
+    };
+    focusContext[focusContext.length - 1].addEventListener('blur', onBlur);
+  }
   // eslint-disable-next-line no-console
-  console.log(event.target);
-});
+  console.log(...focusContext);
+}
+document.body.addEventListener('focusin', onFocusIn);
 
 // Add a clear focus style
 const styleTag = document.createElement('style');
diff --git a/test/e2e/e2e.helpers.js b/test/e2e/e2e.helpers.js
index b7492548..aa7f0d36 100644
--- a/test/e2e/e2e.helpers.js
+++ b/test/e2e/e2e.helpers.js
@@ -1,3 +1,5 @@
+import { appendHTMLWithShadowRoots } from '../shadow-root-utils';
+
 export function setupTestWindow(done) {
   cy.visit('./cypress/test-sandbox.html');
   cy.window().then(done);
@@ -13,9 +15,27 @@ export function removeAllChildNodes(parent) {
     parent.removeChild(parent.firstChild);
   }
 }
-export function setupFixture(content) {
-  const container = document.createElement('div');
-  container.innerHTML = content;
-  document.body.append(container);
+
+/**
+ * @typedef {Object} SetupFixtureOptions
+ * @property {Window=} window to setup in (defaults to test context window)
+ * @property {string=} caseId subtree element id to render from the fixture
+ */
+
+/**
+ * Renders a fixture into the body with support for shadow dom hydration
+ * @param {string} content html content to be used as fixture
+ * @param {SetupFixtureOptions} options
+ * @returns {HTMLDivElement} return.container the element the fixture was rendered into
+ */
+export function setupFixture(content, options = {}) {
+  const win = options.window || window;
+  const doc = win.document;
+  const container = doc.createElement('div');
+  appendHTMLWithShadowRoots(container, content, {
+    win,
+    caseId: options.caseId,
+  });
+  doc.body.append(container);
   return { container };
 }
diff --git a/test/e2e/focusable.e2e.js b/test/e2e/focusable.e2e.js
index 5bcd345c..eec35165 100644
--- a/test/e2e/focusable.e2e.js
+++ b/test/e2e/focusable.e2e.js
@@ -2,6 +2,7 @@ import { focusable } from '../../src/index.js';
 import {
   setupTestWindow,
   getFixtures,
+  setupFixture,
   removeAllChildNodes,
   getIdsFromElementsArray,
 } from './e2e.helpers';
@@ -24,6 +25,8 @@ describe('focusable', () => {
       const expectedFocusableIds = [
         'contenteditable-true',
         'contenteditable-nesting',
+        'contenteditable-negative-tabindex',
+        'contenteditable-NaN-tabindex',
         'input',
         'input-readonly',
         'select',
@@ -37,7 +40,9 @@ describe('focusable', () => {
         'negative-select',
         'hiddenParentVisible-button',
         'audio-control',
+        'audio-control-NaN-tabindex',
         'video-control',
+        'video-control-NaN-tabindex',
       ];
 
       const container = document.createElement('div');
@@ -185,10 +190,12 @@ describe('focusable', () => {
 
     it('correctly identifies focusable elements in the "radio" example', () => {
       const expectedFocusableIds = [
-        'formA-radioA',
-        'formA-radioB',
-        'formB-radioA',
-        'formB-radioB',
+        'form1-radioA',
+        'form1-radioB',
+        'form2-radioA',
+        'form2-radioB',
+        'form3-radioA',
+        'form3-radioB',
         'noform-radioA',
         'noform-radioB',
         'noform-groupB-radioA',
@@ -261,17 +268,12 @@ describe('focusable', () => {
     it('correctly identifies focusable elements in the "shadow-dom" example', () => {
       const expectedFocusableIds = ['input'];
 
-      const container = document.createElement('div');
-      container.innerHTML = fixtures['shadow-dom'];
-      document.body.append(container);
-
-      const host = container.querySelector('#shadow-host');
-      const template = container.querySelector('#shadow-root-template');
+      const { container } = setupFixture(fixtures['shadow-dom'], { window });
+      const host = container.querySelector('test-shadow');
 
-      const shadow = host.attachShadow({ mode: 'open' });
-      shadow.appendChild(template.content.cloneNode(true));
-
-      const focusableElements = focusable(shadow.querySelector('#container'));
+      const focusableElements = focusable(
+        host.shadowRoot.querySelector('#container')
+      );
 
       expect(getIdsFromElementsArray(focusableElements)).to.eql(
         expectedFocusableIds
diff --git a/test/e2e/isFocusable.e2e.js b/test/e2e/isFocusable.e2e.js
index a9690d3e..5e745e34 100644
--- a/test/e2e/isFocusable.e2e.js
+++ b/test/e2e/isFocusable.e2e.js
@@ -107,7 +107,11 @@ describe('isFocusable', () => {
     it('returns true for any element with a `contenteditable` attribute with a truthy value', () => {
       const container = document.createElement('div');
       container.innerHTML = `<div contenteditable="true">contenteditable div</div>
-        <p contenteditable="true">contenteditable paragraph</p>`;
+        <p contenteditable="true">contenteditable paragraph</p>
+        <div contenteditable="true" tabindex="-1">contenteditable div focusable but not tabbable</div>
+        <div contenteditable="true" tabindex="NaN">contenteditable div focusable and tabbable</div>
+        <audio tabindex="foo" controls>audio controls focusable and tabbable</audio>
+        <video tabindex="bar" controls>video controls focusable and tabbable</video>`;
       document.body.append(container);
 
       const editableDiv = getByText(container, 'contenteditable div');
@@ -115,19 +119,39 @@ describe('isFocusable', () => {
         container,
         'contenteditable paragraph'
       );
+      const editableDivWithNegativeTabIndex = getByText(
+        container,
+        'contenteditable div focusable but not tabbable'
+      );
+      const editableDivWithNanTabIndex = getByText(
+        container,
+        'contenteditable div focusable and tabbable'
+      );
+      const audioWithNanTabIndex = getByText(
+        container,
+        'audio controls focusable and tabbable'
+      );
+      const videoWithNanTabIndex = getByText(
+        container,
+        'video controls focusable and tabbable'
+      );
 
       expect(isFocusable(editableDiv)).to.eql(true);
       expect(isFocusable(editableParagraph)).to.eql(true);
+      expect(isFocusable(editableDivWithNegativeTabIndex)).to.eql(true);
+      expect(isFocusable(editableDivWithNanTabIndex)).to.eql(true);
+      expect(isFocusable(audioWithNanTabIndex)).to.eql(true);
+      expect(isFocusable(videoWithNanTabIndex)).to.eql(true);
     });
 
     it('returns true for any element with a non-negative `tabindex` attribute', () => {
       const container = document.createElement('div');
-      container.innerHTML = `<p tabIndex="2">Focusable parapgraph</p>
+      container.innerHTML = `<p tabIndex="2">Focusable paragraph</p>
         <div tabIndex="1">Focusable div</div>
         <span tabIndex="0">Focusable span</span>`;
       document.body.append(container);
 
-      expect(isFocusable(getByText(container, 'Focusable parapgraph'))).to.eql(
+      expect(isFocusable(getByText(container, 'Focusable paragraph'))).to.eql(
         true
       );
       expect(isFocusable(getByText(container, 'Focusable div'))).to.eql(true);
@@ -137,7 +161,7 @@ describe('isFocusable', () => {
     it('returns true for any element with a negative `tabindex` attribute', () => {
       const container = document.createElement('div');
       container.innerHTML = `<input tabIndex="-1" data-testid="focusableInput" />
-        <p tabIndex="-1">Focusable parapgraph</p>
+        <p tabIndex="-1">Focusable paragraph</p>
         <div tabIndex="-1">Focusable div</div>
         <span tabIndex="-1">Focusable span</span>`;
       document.body.append(container);
@@ -145,7 +169,7 @@ describe('isFocusable', () => {
       expect(isFocusable(getByTestId(container, 'focusableInput'))).to.eql(
         true
       );
-      expect(isFocusable(getByText(container, 'Focusable parapgraph'))).to.eql(
+      expect(isFocusable(getByText(container, 'Focusable paragraph'))).to.eql(
         true
       );
       expect(isFocusable(getByText(container, 'Focusable div'))).to.eql(true);
@@ -171,12 +195,12 @@ describe('isFocusable', () => {
   describe('returns false', () => {
     it('returns false for elements that are generally not Focusable', () => {
       const container = document.createElement('div');
-      container.innerHTML = `<p>parapgraph</p>
+      container.innerHTML = `<p>paragraph</p>
         <div>div</div>
         <span>span</span>`;
       document.body.append(container);
 
-      expect(isFocusable(getByText(container, 'parapgraph'))).to.eql(false);
+      expect(isFocusable(getByText(container, 'paragraph'))).to.eql(false);
       expect(isFocusable(getByText(container, 'div'))).to.eql(false);
       expect(isFocusable(getByText(container, 'span'))).to.eql(false);
     });
diff --git a/test/e2e/isTabbable.e2e.js b/test/e2e/isTabbable.e2e.js
index f5c9e795..82e572c9 100644
--- a/test/e2e/isTabbable.e2e.js
+++ b/test/e2e/isTabbable.e2e.js
@@ -107,7 +107,11 @@ describe('isTabbable', () => {
     it('returns true for any element with a `contenteditable` attribute with a truthy value', () => {
       const container = document.createElement('div');
       container.innerHTML = `<div contenteditable="true">contenteditable div</div>
-        <p contenteditable="true">contenteditable paragraph</p>`;
+        <p contenteditable="true">contenteditable paragraph</p>
+        <div contenteditable="true" tabindex="-1">contenteditable div focusable but not tabbable</div>
+        <div contenteditable="true" tabindex="NaN">contenteditable div focusable and tabbable</div>
+        <audio tabindex="foo" controls>audio controls focusable and tabbable</audio>
+        <video tabindex="bar" controls>video controls focusable and tabbable</video>`;
       document.body.append(container);
 
       const editableDiv = getByText(container, 'contenteditable div');
@@ -115,19 +119,39 @@ describe('isTabbable', () => {
         container,
         'contenteditable paragraph'
       );
+      const editableDivWithNegativeTabIndex = getByText(
+        container,
+        'contenteditable div focusable but not tabbable'
+      );
+      const editableDivWithNanTabIndex = getByText(
+        container,
+        'contenteditable div focusable and tabbable'
+      );
+      const audioWithNanTabIndex = getByText(
+        container,
+        'audio controls focusable and tabbable'
+      );
+      const videoWithNanTabIndex = getByText(
+        container,
+        'video controls focusable and tabbable'
+      );
 
       expect(isTabbable(editableDiv)).to.eql(true);
       expect(isTabbable(editableParagraph)).to.eql(true);
+      expect(isTabbable(editableDivWithNegativeTabIndex)).to.eql(false);
+      expect(isTabbable(editableDivWithNanTabIndex)).to.eql(true);
+      expect(isTabbable(audioWithNanTabIndex)).to.eql(true);
+      expect(isTabbable(videoWithNanTabIndex)).to.eql(true);
     });
 
     it('returns true for any element with a non-negative `tabindex` attribute', () => {
       const container = document.createElement('div');
-      container.innerHTML = `<p tabIndex="2">Tabbable parapgraph</p>
+      container.innerHTML = `<p tabIndex="2">Tabbable paragraph</p>
         <div tabIndex="1">Tabbable div</div>
         <span tabIndex="0">Tabbable span</span>`;
       document.body.append(container);
 
-      expect(isTabbable(getByText(container, 'Tabbable parapgraph'))).to.eql(
+      expect(isTabbable(getByText(container, 'Tabbable paragraph'))).to.eql(
         true
       );
       expect(isTabbable(getByText(container, 'Tabbable div'))).to.eql(true);
@@ -138,12 +162,12 @@ describe('isTabbable', () => {
   describe('returns false', () => {
     it('returns false for elements that are generally not tabbable', () => {
       const container = document.createElement('div');
-      container.innerHTML = `<p>parapgraph</p>
+      container.innerHTML = `<p>paragraph</p>
         <div>div</div>
         <span>span</span>`;
       document.body.append(container);
 
-      expect(isTabbable(getByText(container, 'parapgraph'))).to.eql(false);
+      expect(isTabbable(getByText(container, 'paragraph'))).to.eql(false);
       expect(isTabbable(getByText(container, 'div'))).to.eql(false);
       expect(isTabbable(getByText(container, 'span'))).to.eql(false);
     });
diff --git a/test/e2e/shadow-dom.e2e.js b/test/e2e/shadow-dom.e2e.js
new file mode 100644
index 00000000..73cdc897
--- /dev/null
+++ b/test/e2e/shadow-dom.e2e.js
@@ -0,0 +1,541 @@
+import {
+  isTabbable,
+  isFocusable,
+  tabbable,
+  focusable,
+} from '../../src/index.js';
+import {
+  setupTestWindow,
+  removeAllChildNodes,
+  setupFixture,
+  getFixtures,
+  getIdsFromElementsArray,
+} from './e2e.helpers';
+
+describe('web-components', () => {
+  let window, document, fixtures;
+  before(() => {
+    setupTestWindow((testWindow) => {
+      window = testWindow;
+      document = testWindow.document;
+    });
+    getFixtures((f) => (fixtures = f));
+  });
+
+  afterEach(() => {
+    removeAllChildNodes(document.body);
+  });
+
+  describe('isFocusable/isTabbable', () => {
+    it('should separate shadow/light radio button groups', () => {
+      const { container } = setupFixture(fixtures.shadowDomRadio, { window });
+      const shadowRoot = container.querySelector('#webComp').shadowRoot;
+      const shadowRadio1 = shadowRoot.querySelector('#shadow-radio1');
+      const shadowRadio2 = shadowRoot.querySelector('#shadow-radio2');
+      const lightRadio1 = container.querySelector('#light-radio1');
+      const radio2Slotted = container.querySelector('#light-radio2-slotted');
+      const lightRadio3 = container.querySelector('#light-radio3');
+
+      // always focusable
+      expect(isFocusable(shadowRadio1), 'checked in shadow').to.eql(true);
+      expect(isFocusable(shadowRadio2), 'not checked in shadow').to.eql(true);
+      expect(isFocusable(lightRadio1), 'checked in light').to.eql(true);
+      expect(isFocusable(radio2Slotted), 'not checked slotted').to.eql(true);
+      expect(isFocusable(lightRadio3), 'not checked in light').to.eql(true);
+      // only the first checked is tabbable
+      expect(isTabbable(shadowRadio1), 'checked in shadow').to.eql(true);
+      expect(isTabbable(shadowRadio2), 'not checked in shadow').to.eql(false);
+      expect(isTabbable(lightRadio1), 'checked in light').to.eql(true);
+      expect(isTabbable(radio2Slotted), 'not checked slotted').to.eql(false);
+      expect(isTabbable(lightRadio3), 'not checked in light').to.eql(false);
+    });
+    it('should not match elements in shadow root with a "display=none" ancestor', () => {
+      const { container } = setupFixture(fixtures.shadowDomDisplay, {
+        window,
+        caseId: 'light-display-none',
+      });
+      const shadowRoot = container.querySelector('test-shadow').shadowRoot;
+      const shadowInput = shadowRoot.querySelector('#shadow-input');
+      const lightInputSlotted = container.querySelector('#light-input-slotted');
+
+      // focusable
+      expect(isFocusable(shadowInput), 'non display shadow').to.eql(false);
+      expect(isFocusable(lightInputSlotted), 'non display slotted').to.eql(
+        false
+      );
+      // tabbable
+      expect(isTabbable(shadowInput), 'non display shadow').to.eql(false);
+      expect(isTabbable(lightInputSlotted), 'non display slotted').to.eql(
+        false
+      );
+    });
+    it('should not match elements in a non display slot', () => {
+      const { container } = setupFixture(fixtures.shadowDomDisplay, {
+        window,
+        caseId: 'slot-display-none',
+      });
+      const lightInputSlotted = container.querySelector('#light-input-slotted');
+
+      expect(isFocusable(lightInputSlotted)).to.eql(false);
+      expect(isTabbable(lightInputSlotted)).to.eql(false);
+    });
+    it('should not match elements in a closed shadow root with inner display="none" (fallback to zero-area-size)', () => {
+      const { container } = setupFixture(fixtures.shadowDomDisplay, {
+        window,
+        caseId: 'slot-display-none-closed-shadow',
+      });
+      const webComp = container.querySelector('test-shadow');
+      const lightDisplayNoneSlotted = container.querySelector(
+        '#light-input-slotted'
+      );
+
+      // focusable
+      expect(
+        isFocusable(lightDisplayNoneSlotted),
+        'slotted into non-displayed container so not focusable'
+      ).to.eql(false);
+      expect(
+        isFocusable(lightDisplayNoneSlotted, {
+          getShadowRoot: (node) => node === webComp,
+        }),
+        'fallback to zero size check for unreached shadow root but still not focusable'
+      ).to.eql(false);
+      // tabbable
+      expect(
+        isTabbable(lightDisplayNoneSlotted),
+        'slotted into non-displayed container so not tabbable'
+      ).to.eql(false);
+      expect(
+        isTabbable(lightDisplayNoneSlotted, {
+          getShadowRoot: (node) => node === webComp,
+        }),
+        'fallback to zero size for unreached shadow root but still not tabbable'
+      ).to.eql(false);
+    });
+    it('should not match slot elements', () => {
+      const { container } = setupFixture(fixtures.shadowDomQuery, {
+        window,
+        caseId: 'slots-tab-index',
+      });
+      const shadowRoot = container.querySelector('test-shadow').shadowRoot;
+      const slotWithTabIndex = shadowRoot.querySelector(
+        'slot[name="slot-first"]'
+      );
+
+      expect(isFocusable(slotWithTabIndex), 'slot not focusable').to.eql(false);
+      expect(isTabbable(slotWithTabIndex), 'slot not tabbable').to.eql(false);
+    });
+  });
+  describe('query', () => {
+    it('should find elements inside shadow dom', () => {
+      const expected = ['light-before', 'shadow-input', 'light-after'];
+      const { container } = setupFixture(fixtures.shadowDomQuery, {
+        window,
+        caseId: 'shadow-input',
+      });
+
+      let result = tabbable(container, { getShadowRoot() {} });
+      expect(getIdsFromElementsArray(result), 'using `() => {}`').to.eql(
+        expected
+      );
+
+      result = tabbable(container, { getShadowRoot: true });
+      expect(getIdsFromElementsArray(result), 'using `true`').to.eql(expected);
+    });
+
+    it('should find tabbable host', () => {
+      const expected = [
+        'light-before',
+        'tabbable-host',
+        'shadow-input',
+        'light-after',
+      ];
+      const { container } = setupFixture(fixtures.shadowDomQuery, {
+        window,
+        caseId: 'tabbable-host',
+      });
+
+      let result = tabbable(container, { getShadowRoot() {} });
+      expect(getIdsFromElementsArray(result), 'using `() => {}`').to.eql(
+        expected
+      );
+
+      result = tabbable(container, { getShadowRoot: true });
+      expect(getIdsFromElementsArray(result), 'using `true`').to.eql(expected);
+    });
+
+    it('should find elements inside shadow dom when directly querying the element with shadow root', () => {
+      const expected = ['shadow-input'];
+      const { container } = setupFixture(fixtures.shadowDomQuery, {
+        window,
+        caseId: 'shadow-input',
+      });
+      const shadowElement = container.querySelector('test-shadow');
+
+      let result = tabbable(shadowElement, { getShadowRoot() {} });
+      expect(getIdsFromElementsArray(result), 'using `() => {}`').to.eql(
+        expected
+      );
+
+      result = tabbable(shadowElement, { getShadowRoot: true });
+      expect(getIdsFromElementsArray(result), 'using `true`').to.eql(expected);
+    });
+
+    it('should find elements inside shadow dom when directly querying the element with shadow root (include container)', () => {
+      const expected = ['shadow-host', 'shadow-input'];
+      const { container } = setupFixture(fixtures.shadowDomQuery, {
+        window,
+        caseId: 'shadow-input',
+      });
+      const shadowElement = container.querySelector('test-shadow');
+      shadowElement.setAttribute('id', 'shadow-host');
+      shadowElement.setAttribute('tabindex', 0);
+
+      let result = tabbable(shadowElement, {
+        getShadowRoot() {},
+        includeContainer: true,
+      });
+      expect(getIdsFromElementsArray(result), 'using `() => {}`').to.eql(
+        expected
+      );
+
+      result = tabbable(shadowElement, {
+        getShadowRoot: true,
+        includeContainer: true,
+      });
+      expect(getIdsFromElementsArray(result), 'using `true`').to.eql(expected);
+    });
+
+    it('should sort slots inside shadow dom', () => {
+      const expected = [
+        'light-before',
+        'light-slotter-before',
+        'shadow-input',
+        'light-slotter-after',
+        'light-slotter-default',
+        'default-slot-input',
+        'light-after',
+      ];
+      const { container } = setupFixture(fixtures.shadowDomQuery, {
+        window,
+        caseId: 'light-shadow-with-slots',
+      });
+
+      let result = tabbable(container, { getShadowRoot() {} });
+      expect(getIdsFromElementsArray(result), 'using `() => {}`').to.eql(
+        expected
+      );
+
+      result = tabbable(container, { getShadowRoot: true });
+      expect(getIdsFromElementsArray(result), 'using `true`').to.eql(expected);
+    });
+
+    it('should sort shadow and light elements separately', () => {
+      const expected = [
+        'light-first',
+        'light-middle',
+        'light-last',
+        'shadow-first',
+        'shadow-middle',
+        'shadow-last',
+      ];
+      const { container } = setupFixture(fixtures.shadowDomQuery, {
+        window,
+        caseId: 'light-shadow-tab-index',
+      });
+
+      let result = tabbable(container, { getShadowRoot() {} });
+      expect(getIdsFromElementsArray(result), 'using `() => {}`').to.eql(
+        expected
+      );
+
+      result = tabbable(container, { getShadowRoot() {} });
+      expect(getIdsFromElementsArray(result), 'using `true`').to.eql(expected);
+    });
+
+    it('should sort slots content by slots tabindex', () => {
+      const { container } = setupFixture(fixtures.shadowDomQuery, {
+        window,
+        caseId: 'slots-tab-index',
+      });
+
+      let tabbableList = tabbable(container, { getShadowRoot() {} });
+      let focusableList = focusable(container, { getShadowRoot() {} });
+
+      expect(
+        getIdsFromElementsArray(tabbableList),
+        'tabbable, using `() => {}`'
+      ).to.eql([
+        'light-1',
+        'shadow-1',
+        'shadow-2',
+        'light-2',
+        'shadow-3',
+        'light-3',
+      ]);
+      expect(
+        getIdsFromElementsArray(focusableList),
+        'focusable, using `() => {}`'
+      ).to.eql([
+        'shadow-3',
+        'light-3',
+        'light-2',
+        'light-1',
+        'shadow-2',
+        'shadow-1',
+      ]);
+
+      tabbableList = tabbable(container, { getShadowRoot: true });
+      focusableList = focusable(container, { getShadowRoot: true });
+
+      expect(
+        getIdsFromElementsArray(tabbableList),
+        'tabbable, using `true`'
+      ).to.eql([
+        'light-1',
+        'shadow-1',
+        'shadow-2',
+        'light-2',
+        'shadow-3',
+        'light-3',
+      ]);
+      expect(
+        getIdsFromElementsArray(focusableList),
+        'focusable, using `true`'
+      ).to.eql([
+        'shadow-3',
+        'light-3',
+        'light-2',
+        'light-1',
+        'shadow-2',
+        'shadow-1',
+      ]);
+    });
+
+    it('should insert slots nested content according to slot positions', () => {
+      const expected = [
+        'light-1',
+        'light-2',
+        'light-3',
+        'shadow-between',
+        'light-4',
+        'light-5',
+        'light-6',
+      ];
+      const { container } = setupFixture(fixtures.shadowDomQuery, {
+        window,
+        caseId: 'slots-nested-tab-index',
+      });
+
+      let result = tabbable(container, { getShadowRoot() {} });
+      expect(getIdsFromElementsArray(result), 'using `() => {}`').to.eql(
+        expected
+      );
+
+      result = tabbable(container, { getShadowRoot: true });
+      expect(getIdsFromElementsArray(result), 'using `true`').to.eql(expected);
+    });
+
+    it('should query nested shadow doms for slots', () => {
+      const expected = [
+        'shadow-outter-before',
+        'shadow-inner',
+        'light-slotted-input',
+        'shadow-outter-after',
+      ];
+
+      const { container } = setupFixture(fixtures.shadowDomQuery, {
+        window,
+        caseId: 'slotted-through-multiple-shadows',
+      });
+
+      let result = tabbable(container, { getShadowRoot() {} });
+      expect(getIdsFromElementsArray(result), 'using `() => {}`').to.eql(
+        expected
+      );
+
+      result = tabbable(container, { getShadowRoot: true });
+      expect(getIdsFromElementsArray(result), 'using `true`').to.eql(expected);
+    });
+
+    it('should find elements inside slot', () => {
+      const expected = ['light-slotter-before'];
+      const { container } = setupFixture(fixtures.shadowDomQuery, {
+        window,
+        caseId: 'light-shadow-with-slots',
+      });
+      const shadowElement = container.querySelector('test-shadow');
+      const slot = shadowElement.shadowRoot.querySelector(
+        'slot[name="before"]'
+      );
+
+      let result = tabbable(slot, { getShadowRoot() {} });
+      expect(getIdsFromElementsArray(result), 'using `() => {}`').to.eql(
+        expected
+      );
+
+      result = tabbable(slot, { getShadowRoot: true });
+      expect(getIdsFromElementsArray(result), 'using `true`').to.eql(expected);
+    });
+
+    it('should not find slot with tabindex', () => {
+      const expected = ['light-slotter-before'];
+      const { container } = setupFixture(fixtures.shadowDomQuery, {
+        window,
+        caseId: 'light-shadow-with-slots',
+      });
+      const shadowElement = container.querySelector('test-shadow');
+      const slot = shadowElement.shadowRoot.querySelector(
+        'slot[name="before"]'
+      );
+      slot.id = 'slot-id';
+      slot.tabIndex = '1';
+
+      let result = tabbable(slot, { getShadowRoot() {} });
+      expect(getIdsFromElementsArray(result), 'using `() => {}`').to.eql(
+        expected
+      );
+
+      result = tabbable(slot, { getShadowRoot: true });
+      expect(getIdsFromElementsArray(result), 'using `true`').to.eql(expected);
+    });
+
+    it('should filter un-tabbable elements', () => {
+      const expected = [
+        'shadow-summary',
+        'shadow-details-without-summary',
+        'shadow-radio-checked',
+      ];
+      const { container } = setupFixture(fixtures.shadowDomQuery, {
+        window,
+        caseId: 'filter-conditions',
+      });
+
+      let result = tabbable(container, { getShadowRoot() {} });
+      expect(getIdsFromElementsArray(result), 'using `() => {}`').to.eql(
+        expected
+      );
+
+      result = tabbable(container, { getShadowRoot: true });
+      expect(getIdsFromElementsArray(result), 'using `true`').to.eql(expected);
+    });
+
+    it('should filter un-focusable elements', () => {
+      const expected = [
+        'shadow-summary',
+        'shadow-details-without-summary',
+        'shadow-radio-unchecked',
+        'shadow-radio-checked',
+        'shadow-negative-tabindex',
+      ];
+      const { container } = setupFixture(fixtures.shadowDomQuery, {
+        window,
+        caseId: 'filter-conditions',
+      });
+
+      let result = focusable(container, { getShadowRoot() {} });
+      expect(getIdsFromElementsArray(result), 'using `() => {}`').to.eql(
+        expected
+      );
+
+      result = focusable(container, { getShadowRoot: true });
+      expect(getIdsFromElementsArray(result), 'using `true`').to.eql(expected);
+    });
+
+    it('should accept shadow root in order to query closed shadows', () => {
+      const { container } = setupFixture(fixtures.shadowDomQuery, {
+        window,
+        caseId: 'closed-shadow-input',
+      });
+
+      const providedShadowRoot = tabbable(container, {
+        getShadowRoot(node) {
+          return node.closedShadowRoot;
+        },
+      });
+      const noKnowlegeOfShadowRootFn = tabbable(container, {
+        getShadowRoot(_node) {
+          return false;
+        },
+      });
+      const noKnowlegeOfShadowRootTrue = tabbable(container, {
+        getShadowRoot: true,
+      });
+      const undisclosedShadowRoot = tabbable(container, {
+        getShadowRoot(_node) {
+          return true;
+        },
+      });
+
+      expect(
+        getIdsFromElementsArray(providedShadowRoot),
+        'provided shadow root'
+      ).to.eql([
+        'light-before',
+        'shadow-input',
+        'light-slotted',
+        'light-after',
+      ]);
+      expect(
+        getIdsFromElementsArray(noKnowlegeOfShadowRootFn),
+        'no knowledge of shadow root, using `() => false`'
+      ).to.eql(['light-slotted', 'light-before', 'light-after']);
+      expect(
+        getIdsFromElementsArray(noKnowlegeOfShadowRootTrue),
+        'no knowledge of shadow root, using `true`'
+      ).to.eql(getIdsFromElementsArray(noKnowlegeOfShadowRootFn));
+      expect(
+        getIdsFromElementsArray(undisclosedShadowRoot),
+        'undisclosed shadow root'
+      ).to.eql(['light-before', 'light-slotted', 'light-after']);
+    });
+
+    // NOTE: this test shows that tabbable() and focusable() will not find
+    //  query-light-input-slotted whether we give the closed shadow root to look at
+    //  or not, because it's slotted into a 'display: none' container inside
+    //  the close shadow dom
+    it('should not match elements in a non display slot', () => {
+      const expected = [];
+      const { container } = setupFixture(fixtures.shadowDomQuery, {
+        window,
+        caseId: 'query-slot-display-none-closed-shadow',
+      });
+
+      expect(
+        getIdsFromElementsArray(
+          focusable(container),
+          'focusable no options (shadow support disabled) should not find'
+        )
+      ).to.eql(expected);
+
+      expect(
+        getIdsFromElementsArray(
+          focusable(container, {
+            getShadowRoot(node) {
+              return node.closedShadowRoot;
+            },
+          }),
+          'focusable with options should not find because slot container is hidden'
+        )
+      ).to.eql(expected);
+
+      expect(
+        getIdsFromElementsArray(
+          tabbable(container),
+          'tabbable no options (shadow support disabled) should not find'
+        )
+      ).to.eql(expected);
+
+      expect(
+        getIdsFromElementsArray(
+          tabbable(container, {
+            getShadowRoot(node) {
+              return node.closedShadowRoot;
+            },
+          }),
+          'tabbable with options should not find because slot container is hidden'
+        )
+      ).to.eql(expected);
+    });
+  });
+});
diff --git a/test/e2e/tabbable.e2e.js b/test/e2e/tabbable.e2e.js
index 53be32e9..c7009178 100644
--- a/test/e2e/tabbable.e2e.js
+++ b/test/e2e/tabbable.e2e.js
@@ -2,6 +2,7 @@ import { tabbable } from '../../src/index.js';
 import {
   setupTestWindow,
   getFixtures,
+  setupFixture,
   removeAllChildNodes,
   getIdsFromElementsArray,
 } from './e2e.helpers';
@@ -25,6 +26,7 @@ describe('tabbable', () => {
         'tabindex-hrefless-anchor',
         'contenteditable-true',
         'contenteditable-nesting',
+        'contenteditable-NaN-tabindex',
         'input',
         'input-readonly',
         'select',
@@ -36,7 +38,9 @@ describe('tabbable', () => {
         'tabindex-div',
         'hiddenParentVisible-button',
         'audio-control',
+        'audio-control-NaN-tabindex',
         'video-control',
+        'video-control-NaN-tabindex',
       ];
 
       const container = document.createElement('div');
@@ -184,9 +188,11 @@ describe('tabbable', () => {
 
     it('correctly identifies tabbable elements in the "radio" example', () => {
       const expectedTabbableIds = [
-        'formA-radioA',
-        'formB-radioA',
-        'formB-radioB',
+        'form1-radioA',
+        'form2-radioA',
+        'form2-radioB',
+        'form3-radioA',
+        'form3-radioB',
         'noform-radioA',
         'noform-groupB-radioA',
         'noform-groupB-radioB',
@@ -210,9 +216,11 @@ describe('tabbable', () => {
       cy.spy(console, 'error');
 
       const expectedTabbableIds = [
-        'formA-radioA',
-        'formB-radioA',
-        'formB-radioB',
+        'form1-radioA',
+        'form2-radioA',
+        'form2-radioB',
+        'form3-radioA',
+        'form3-radioB',
         'noform-radioA',
         'noform-groupB-radioA',
         'noform-groupB-radioB',
@@ -290,17 +298,12 @@ describe('tabbable', () => {
     it('correctly identifies tabbable elements in the "shadow-dom" example', () => {
       const expectedTabbableIds = ['input'];
 
-      const container = document.createElement('div');
-      container.innerHTML = fixtures['shadow-dom'];
-      document.body.append(container);
-
-      const host = container.querySelector('#shadow-host');
-      const template = container.querySelector('#shadow-root-template');
+      const { container } = setupFixture(fixtures['shadow-dom'], { window });
+      const host = container.querySelector('test-shadow');
 
-      const shadow = host.attachShadow({ mode: 'open' });
-      shadow.appendChild(template.content.cloneNode(true));
-
-      const tabbableElements = tabbable(shadow.querySelector('#container'));
+      const tabbableElements = tabbable(
+        host.shadowRoot.querySelector('#container')
+      );
 
       expect(getIdsFromElementsArray(tabbableElements)).to.eql(
         expectedTabbableIds
diff --git a/test/fixtures/basic.html b/test/fixtures/basic.html
index c7b7d972..2845305a 100644
--- a/test/fixtures/basic.html
+++ b/test/fixtures/basic.html
@@ -11,6 +11,12 @@
     </div>
   </div>
 </div>
+<div id="contenteditable-negative-tabindex" contenteditable="true" tabindex="-1" style="padding:1em">
+  this editable text is focusable but not tabbable
+</div>
+<div id="contenteditable-NaN-tabindex" contenteditable="true" tabindex="NaN" style="padding:1em">
+  editable text
+</div>
 
 <input id="input" type="text" />
 <input id="input-readonly" readonly />
@@ -50,9 +56,11 @@
 
 <audio id="audio-control" controls></audio>
 <audio id="audio-nocontrol"></audio>
+<audio id="audio-control-NaN-tabindex" tabindex="foo" controls></audio>
 
 <video id="video-control" controls></video>
 <video id="video-nocontrol"></video>
+<video id="video-control-NaN-tabindex" tabindex="bar" controls></video>
 
 <iframe
   id="iframe"
diff --git a/test/fixtures/displayed.html b/test/fixtures/displayed.html
index 7ce14442..ebb1c4a5 100644
--- a/test/fixtures/displayed.html
+++ b/test/fixtures/displayed.html
@@ -1,10 +1,15 @@
 <div id="displayed-top" tabindex="0">
-  <div id="displayed-nested" tabindex="0"></div>
+  <div id="displayed-nested" tabindex="0">displayed-nested</div>
 </div>
 <div id="displayed-none-top" tabindex="0" style="display: none">
-  <div id="nested-under-displayed-none" tabindex="0"></div>
+  <div id="nested-under-displayed-none" tabindex="0">nested-under-displayed-none</div>
 </div>
-<div id="displayed-zero-size" tabindex="0" style="width: 0; height: 0"></div>
+<div id="displayed-zero-size" tabindex="0" style="width: 0; height: 0">displayed-zero-size</div>
 <div id="displayed-contents-top" tabindex="0" style="display: contents">
-  <div id="nested-under-displayed-contents" tabindex="0"></div>
+  <div id="nested-under-displayed-contents" tabindex="0">nested-under-displayed-contents</div>
 </div>
+<style>
+  div[id*="displayed-"] {
+    outline: 1px solid lime;
+  }
+</style>
diff --git a/test/fixtures/index.js b/test/fixtures/index.js
index 87611ff7..9f6c998b 100644
--- a/test/fixtures/index.js
+++ b/test/fixtures/index.js
@@ -24,4 +24,16 @@ module.exports = {
   ),
   displayed: fs.readFileSync(path.join(__dirname, 'displayed.html'), 'utf8'),
   fieldset: fs.readFileSync(path.join(__dirname, 'fieldset.html'), 'utf8'),
+  shadowDomRadio: fs.readFileSync(
+    path.join(__dirname, 'shadow-dom-radio.html'),
+    'utf8'
+  ),
+  shadowDomDisplay: fs.readFileSync(
+    path.join(__dirname, 'shadow-dom-display.html'),
+    'utf8'
+  ),
+  shadowDomQuery: fs.readFileSync(
+    path.join(__dirname, 'shadow-dom-query.html'),
+    'utf8'
+  ),
 };
diff --git a/test/fixtures/radio.html b/test/fixtures/radio.html
index 4bd3308e..19032795 100644
--- a/test/fixtures/radio.html
+++ b/test/fixtures/radio.html
@@ -1,20 +1,26 @@
 <div>
   <form>
     <fieldset>
-      <legend>form 1 groupA - initial checked</legend>
-      <input type="radio" name="groupA" checked value="a" id="formA-radioA" />
-      <input type="radio" name="groupA" value="b" id="formA-radioB" />
+      <legend>form1 groupA - initial checked</legend>
+      <input type="radio" name="groupA" checked value="a" id="form1-radioA" />
+      <input type="radio" name="groupA" value="b" id="form1-radioB" />
     </fieldset>
   </form>
 
   <form>
     <fieldset>
-      <legend>form 2 groupA - no checked</legend>
-      <input type="radio" name="groupA" value="a" id="formB-radioA" />
-      <input type="radio" name="groupA" value="b" id="formB-radioB" />
+      <legend>form2 groupA - no checked</legend>
+      <input type="radio" name="groupA" value="a" id="form2-radioA" />
+      <input type="radio" name="groupA" value="b" id="form2-radioB" />
     </fieldset>
   </form>
 
+  <form>
+    <p>form3 groupA - no fieldset - no checked</p>
+    <input type="radio" name="groupA" value="a" id="form3-radioA" />
+    <input type="radio" name="groupA" value="b" id="form3-radioB" />
+  </form>
+
   <fieldset>
     <legend>no form groupA - initial checked</legend>
     <input type="radio" name="groupA" value="a" checked id="noform-radioA" />
diff --git a/test/fixtures/shadow-dom-display.html b/test/fixtures/shadow-dom-display.html
new file mode 100644
index 00000000..53e5d397
--- /dev/null
+++ b/test/fixtures/shadow-dom-display.html
@@ -0,0 +1,36 @@
+<div style="display:none;" id="light-display-none">
+    <h2>nested under display none in light dom</h2>
+    <test-shadow>
+        <template shadowroot="open">
+            <div>
+                <input id="shadow-input"></input>
+                <slot></slot>
+            </div>
+        </template>
+        <input id="light-input-slotted"></input>
+    </test-shadow>
+</div>
+
+<div id="slot-display-none">
+    <h2>"display=none" slot</h2>
+    <test-shadow>
+        <template shadowroot="open">
+            <div style="display:none;">
+                <slot></slot>
+            </div>
+        </template>
+        <input id="light-input-slotted"></input>
+    </test-shadow>
+</div>
+
+<div id="slot-display-none-closed-shadow">
+    <h2>"display=none" slot (mode=closed)</h2>
+    <test-shadow>
+        <template shadowroot="closed">
+            <div style="display:none;">
+                <slot></slot>
+            </div>
+        </template>
+        <input id="light-input-slotted"></input>
+    </test-shadow>
+</div>
diff --git a/test/fixtures/shadow-dom-query.html b/test/fixtures/shadow-dom-query.html
new file mode 100644
index 00000000..2dd2edc5
--- /dev/null
+++ b/test/fixtures/shadow-dom-query.html
@@ -0,0 +1,164 @@
+<div id="shadow-input">
+    <h2>shadow input</h2>
+    <input id="light-before"></input>
+    <test-shadow>
+        <template shadowroot="open">
+            <div>
+                <input id="shadow-input"></input>
+            </div>
+        </template>
+    </test-shadow>
+    <input id="light-after"></input>
+</div>
+
+<div id="tabbable-host">
+    <h2>tabbable host</h2>
+    <input id="light-before"></input>
+    <test-shadow tabindex="0" id="tabbable-host">
+        <template shadowroot="open">
+            <div>
+                <input id="shadow-input"></input>
+            </div>
+        </template>
+    </test-shadow>
+    <input id="light-after"></input>
+</div>
+
+<div id="light-shadow-with-slots">
+    <h2>light shadow and slots</h2>
+    <input id="light-before"></input>
+    <test-shadow>
+        <template shadowroot="open">
+            <div>
+                <slot name="before"></slot>
+                <input id="shadow-input"></input>
+                <slot name="after"></slot>
+                <slot>
+                    <input id="default-slot-input-overridden"></input>
+                </slot>
+                <slot name="default-content">
+                    <input id="default-slot-input"></input>
+                </slot>
+            </div>
+        </template>
+        <input id="light-slotter-before" slot="before"></input>
+        <input id="light-slotter-after" slot="after"></input>
+        <input id="light-slotter-default"></input>
+    </test-shadow>
+    <input id="light-after"></input>
+</div>
+
+<div id="light-shadow-tab-index">
+    <h2>light shadow tab index</h2>
+    <input id="light-last"></input>
+    <test-shadow>
+        <template shadowroot="open">
+            <div>
+                <input id="shadow-middle" tabindex="2"></input>
+                <input id="shadow-last"></input>
+                <input id="shadow-first" tabindex="1"></input>
+            </div>
+        </template>
+    </test-shadow>
+    <input id="light-middle" tabindex="10"></input>
+    <input id="light-first" tabindex="5"></input>
+</div>
+
+<div id="slots-tab-index">
+    <h2>slots with tab index</h2>
+    <test-shadow>
+        <template shadowroot="open">
+            <input id="shadow-3"></input>
+            <slot name="slot-last"></slot>
+            <slot name="slot-middle" tabindex="3"></slot>
+            <slot name="slot-first" tabindex="1"></slot>
+            <input id="shadow-2" tabindex="2"></input>
+            <input id="shadow-1" tabindex="1"></input>
+        </template>
+        <input id="light-2" slot="slot-middle"></input>
+        <input id="light-3" slot="slot-last"></input>
+        <input id="light-1" slot="slot-first"></input>
+    </test-shadow>
+</div>
+
+<div id="slots-nested-tab-index">
+    <h2>slots with tab index</h2>
+    <test-shadow>
+        <template shadowroot="open">
+            <slot></slot>
+            <input id="shadow-between" tabindex="2"></input>
+            <slot name="first" tabindex="1"></slot>
+        </template>
+        <input id="light-6"></input>
+        <input id="light-5" tabindex="2"></input>
+        <input id="light-4" tabindex="1"></input>
+        <input id="light-3" slot="first"></input>
+        <input id="light-2" slot="first" tabindex="2"></input>
+        <input id="light-1" slot="first" tabindex="1"></input>
+    </test-shadow>
+</div>
+
+<div id="slotted-through-multiple-shadows">
+    <h2>slot through multiple nested shadow roots</h2>
+    <test-shadow>
+        <template shadowroot="open">
+            <input id="shadow-outter-before"></input>
+            <test-shadow>
+                <template shadowroot="open">
+                    <input id="shadow-inner"></input>
+                    <slot></slot>
+                </template>
+                <slot></slot>
+            </test-shadow>
+            <input id="shadow-outter-after"></input>
+        </template>
+        <input id="light-slotted-input"></input>
+    </test-shadow>
+</div>
+
+<div id="filter-conditions">
+    <h2>different conditions for filtering elements</h2>
+    <test-shadow>
+        <template shadowroot="open">
+            <input id="shadow-disabled" disabled></input>
+            <input id="shadow-type-hidden" type="hidden"></input>
+            <input id="shadow-visibility-hidden" style="visibility: hidden;"></input>
+            <input id="shadow-display-hidden" style="display: none;"></input>
+            <details>
+                <summary id="shadow-summary">un-opened details</summary>
+                <input id="shadow-unopned-details-hidden"></input>
+            </details>
+            <details id="shadow-details-without-summary"></details>
+            <input id="shadow-radio-unchecked" type="radio" name="group-a"></input>
+            <input id="shadow-radio-checked" type="radio" name="group-a" checked></input>
+            <input id="shadow-negative-tabindex" tabindex="-1"></input>
+        </template>
+    </test-shadow>
+</div>
+
+<div id="closed-shadow-input">
+    <h2>closed shadow input</h2>
+    <input id="light-before"></input>
+    <test-shadow>
+        <template shadowroot="closed">
+            <div>
+                <input id="shadow-input"></input>
+                <slot></slot>
+            </div>
+        </template>
+        <input id="light-slotted" tabindex="1"></input>
+    </test-shadow>
+    <input id="light-after"></input>
+</div>
+
+<div id="query-slot-display-none-closed-shadow">
+    <h2>"display=none" slot (mode=closed)</h2>
+    <test-shadow>
+        <template shadowroot="closed">
+            <div style="display:none;">
+                <slot></slot>
+            </div>
+        </template>
+        <input id="query-light-input-slotted"></input>
+    </test-shadow>
+</div>
diff --git a/test/fixtures/shadow-dom-radio.html b/test/fixtures/shadow-dom-radio.html
new file mode 100644
index 00000000..6905b8a4
--- /dev/null
+++ b/test/fixtures/shadow-dom-radio.html
@@ -0,0 +1,16 @@
+<input type="radio" name="original-group" id="light-radio1" checked></input>
+<test-shadow id="webComp">
+    <template shadowroot="open">
+        <input type="radio" name="original-group" id="shadow-radio1" checked></input>
+        <input type="radio" name="original-group" id="shadow-radio2"></input>
+        <slot></slot>
+    </template>
+    <input type="radio" name="original-group" id="light-radio2-slotted"></input>
+</test-shadow>
+<input type="radio" name="original-group" id="light-radio3"></input>
+<style>
+    /*debug: mark light dom radios */
+    input[type="radio"][name="original-group"] {
+        outline: 1px solid blue;
+    }
+</style>
\ No newline at end of file
diff --git a/test/fixtures/shadow-dom.html b/test/fixtures/shadow-dom.html
index 3cf65d46..93b9651b 100644
--- a/test/fixtures/shadow-dom.html
+++ b/test/fixtures/shadow-dom.html
@@ -1,7 +1,7 @@
-<div id="shadow-host"></div>
-
-<template id="shadow-root-template">
-  <div id="container">
-    <input id="input" type="text" />
-  </div>
-</template>
+<test-shadow>
+  <template shadowroot="open">
+    <div id="container">
+      <input id="input" type="text" />
+    </div>
+  </template>
+</test-shadow>
diff --git a/test/shadow-root-utils.js b/test/shadow-root-utils.js
new file mode 100644
index 00000000..01316d95
--- /dev/null
+++ b/test/shadow-root-utils.js
@@ -0,0 +1,76 @@
+function supportsDeclarativeShadowDOM() {
+  // eslint-disable-next-line no-prototype-builtins
+  return HTMLTemplateElement.prototype.hasOwnProperty('shadowRoot');
+}
+
+function hydrateShadowDomPolyfill(template) {
+  const mode = template.getAttribute('shadowroot');
+  const delegatesFocus = !!template.getAttribute('shadowrootdelegatesfocus');
+  const host = template.parentNode;
+  const shadowRoot = host.attachShadow({ mode, delegatesFocus });
+  // expose closed shadow root for tests
+  if (mode === 'closed') {
+    host.closedShadowRoot = shadowRoot;
+  }
+  shadowRoot.appendChild(template.content);
+  template.remove();
+}
+
+function scanAndHydrateShadowDom(container) {
+  container
+    .querySelectorAll('template[shadowroot]')
+    .forEach(hydrateShadowDomPolyfill);
+}
+
+function defineCustomTestElement(win) {
+  // register custom element to expose closed shadow for tests
+  if (!win.customElements.get('test-shadow')) {
+    win.customElements.define(
+      'test-shadow',
+      class TestShadow extends win.HTMLElement {
+        constructor() {
+          super();
+          if (supportsDeclarativeShadowDOM()) {
+            // expose closed shadow root for tests
+            const { shadowRoot } = this.attachInternals();
+            if (shadowRoot.mode === 'closed') {
+              this.closedShadowRoot = shadowRoot;
+            }
+          } else {
+            // polyfill nested shadow hydration
+            const shadowRoot = this.shadowRoot || this.closedShadowRoot;
+            if (shadowRoot) {
+              scanAndHydrateShadowDom(shadowRoot);
+            }
+          }
+        }
+      }
+    );
+  }
+}
+
+exports.appendHTMLWithShadowRoots = function (
+  container,
+  content,
+  { win, caseId } = {}
+) {
+  win = win || window;
+  defineCustomTestElement(win);
+  // create dom fragments with shadow dom (if supported)
+  const fragment = new win.DOMParser().parseFromString(content, 'text/html', {
+    includeShadowRoots: true,
+  });
+  // append content
+  if (caseId) {
+    container.appendChild(fragment.querySelector('#' + caseId));
+  } else {
+    const nodes = fragment.children[0].children[1].children;
+    while (nodes.length) {
+      container.appendChild(nodes[0]);
+    }
+  }
+  // polyfill shadow hydration if not supported
+  if (supportsDeclarativeShadowDOM() === false) {
+    scanAndHydrateShadowDom(container);
+  }
+};