accented 0.0.0-20250303013509 → 0.0.0-20250404114312

package/src/accented.ts

@@ -5,6 +5,7 @@ import createLogger from './logger.js';
 import createScanner from './scanner.js';
 import setupScrollListeners from './scroll-listeners.js';
 import setupResizeListener from './resize-listener.js';
+import setupFullscreenListener from './fullscreen-listener.js';
 import setupIntersectionObserver from './intersection-observer.js';
 import { enabled, extendedElementsWithIssues } from './state.js';
 import deepMerge from './utils/deep-merge.js';
@@ -34,9 +35,9 @@ export type { AccentedOptions, DisableAccented };
  *     wait: 500,
  *     leading: false
  *   },
- *   callback: ({ elementsWithIssues, scanDuration }) => {
+ *   callback: ({ elementsWithIssues, performance }) => {
  *    console.log('Elements with issues:', elementsWithIssues);
- *    console.log('Scan duration:', scanDuration);
+ *    console.log('Total blocking time:', performance.totalBlockingTime);
  *   }
  * });
  */
@@ -95,6 +96,7 @@ export default function accented(options: AccentedOptions = {}): DisableAccented
     const cleanupLogger = output.console ? createLogger() : () => {};
     const cleanupScrollListeners = supportsAnchorPositioning(window) ? () => {} : setupScrollListeners();
     const cleanupResizeListener = supportsAnchorPositioning(window) ? () => {} : setupResizeListener();
+    const cleanupFullscreenListener = supportsAnchorPositioning(window) ? () => {} : setupFullscreenListener();
 
     return () => {
       try {
@@ -105,6 +107,7 @@ export default function accented(options: AccentedOptions = {}): DisableAccented
         cleanupLogger();
         cleanupScrollListeners();
         cleanupResizeListener();
+        cleanupFullscreenListener();
         if (cleanupIntersectionObserver) {
           cleanupIntersectionObserver();
         }

package/src/constants.ts

@@ -1,2 +1,3 @@
 export const accentedUrl = 'https://www.npmjs.com/package/accented';
 export const issuesUrl = 'https://github.com/pomerantsev/accented/issues';
+export const getAccentedElementNames = (name: string) => [`${name}-trigger`, `${name}-dialog`];

package/src/dom-updater.ts

@@ -1,7 +1,10 @@
 import { effect } from '@preact/signals-core';
-import { extendedElementsWithIssues } from './state.js';
+import { extendedElementsWithIssues, rootNodes } from './state.js';
 import type { ExtendedElementWithIssues } from './types';
+import areElementsWithIssuesEqual from './utils/are-elements-with-issues-equal.js';
 import supportsAnchorPositioning from './utils/supports-anchor-positioning.js';
+import { isDocument, isDocumentFragment, isShadowRoot } from './utils/dom-helpers.js';
+import getParent from './utils/get-parent.js';
 
 export default function createDomUpdater(name: string, intersectionObserver?: IntersectionObserver) {
   const attrName = `data-${name}`;
@@ -13,8 +16,8 @@ export default function createDomUpdater(name: string, intersectionObserver?: In
       .filter(anchorName => anchorName.startsWith('--'));
   }
 
-  function setAnchorName (element: HTMLElement, id: number) {
-    const anchorNameValue = element.style.getPropertyValue('anchor-name') || window.getComputedStyle(element).getPropertyValue('anchor-name');
+  function setAnchorName (elementWithIssues: ExtendedElementWithIssues) {
+    const { element, id, anchorNameValue } = elementWithIssues;
     const anchorNames = getAnchorNames(anchorNameValue);
     if (anchorNames.length > 0) {
       element.style.setProperty('anchor-name', `${anchorNameValue}, --${name}-anchor-${id}`);
@@ -23,14 +26,13 @@ export default function createDomUpdater(name: string, intersectionObserver?: In
     }
   }
 
-  function removeAnchorName (element: HTMLElement, id: number) {
-    const anchorNameValue = element.style.getPropertyValue('anchor-name');
+  function removeAnchorName (elementWithIssues: ExtendedElementWithIssues) {
+    const { element, anchorNameValue } = elementWithIssues;
     const anchorNames = getAnchorNames(anchorNameValue);
-    const index = anchorNames.indexOf(`--${name}-anchor-${id}`);
-    if (anchorNames.length === 1 && index === 0) {
+    if (anchorNames.length > 0) {
+      element.style.setProperty('anchor-name', anchorNames.join(', '));
+    } else {
       element.style.removeProperty('anchor-name');
-    } else if (anchorNames.length > 1 && index > -1) {
-      element.style.setProperty('anchor-name', anchorNames.filter((_, i) => i !== index).join(', '));
     }
   }
 
@@ -38,10 +40,10 @@ export default function createDomUpdater(name: string, intersectionObserver?: In
     for (const elementWithIssues of extendedElementsWithIssues) {
       elementWithIssues.element.setAttribute(attrName, elementWithIssues.id.toString());
       if (supportsAnchorPositioning(window)) {
-        setAnchorName(elementWithIssues.element, elementWithIssues.id);
+        setAnchorName(elementWithIssues);
       }
 
-      if (elementWithIssues.element.parentElement) {
+      if (getParent(elementWithIssues.element)) {
         elementWithIssues.element.insertAdjacentElement('afterend', elementWithIssues.trigger);
       } else {
         elementWithIssues.element.insertAdjacentElement('beforeend', elementWithIssues.trigger);
@@ -56,7 +58,7 @@ export default function createDomUpdater(name: string, intersectionObserver?: In
     for (const elementWithIssues of extendedElementsWithIssues) {
       elementWithIssues.element.removeAttribute(attrName);
       if (supportsAnchorPositioning(window)) {
-        removeAnchorName(elementWithIssues.element, elementWithIssues.id);
+        removeAnchorName(elementWithIssues);
       }
       elementWithIssues.trigger.remove();
       if (intersectionObserver) {
@@ -69,8 +71,10 @@ export default function createDomUpdater(name: string, intersectionObserver?: In
   stylesheet.replaceSync(`
     @layer ${name} {
       :root {
-        --${name}-primary-color: red;
-        --${name}-secondary-color: white;
+        /* Ensure that the primary / secondary color combination meets WCAG 1.4.3 Contrast (Minimum) */
+        /* OKLCH stuff: https://oklch.com/ */
+        --${name}-primary-color: oklch(0.5 0.3 0);
+        --${name}-secondary-color: oklch(0.98 0 0);
         --${name}-outline-width: 2px;
         --${name}-outline-style: solid;
       }
@@ -86,19 +90,31 @@ export default function createDomUpdater(name: string, intersectionObserver?: In
 
   let previousExtendedElementsWithIssues: Array<ExtendedElementWithIssues> = [];
 
-  document.adoptedStyleSheets.push(stylesheet);
-  const removeStylesheet = () => {
-    if (document.adoptedStyleSheets.includes(stylesheet)) {
-      document.adoptedStyleSheets.splice(document.adoptedStyleSheets.indexOf(stylesheet), 1);
+  let previousRootNodes: Set<Node> = new Set();
+
+  const disposeOfStyleSheetsEffect = effect(() => {
+    const newRootNodes = rootNodes.value;
+    const addedRootNodes = [...newRootNodes].filter(rootNode => !previousRootNodes.has(rootNode));
+    const removedRootNodes = [...previousRootNodes].filter(rootNode => !newRootNodes.has(rootNode));
+    for (const rootNode of addedRootNodes) {
+      if (isDocument(rootNode) || (isDocumentFragment(rootNode) && isShadowRoot(rootNode))) {
+        rootNode.adoptedStyleSheets.push(stylesheet);
+      }
     }
-  };
+    for (const rootNode of removedRootNodes) {
+      if (isDocument(rootNode) || (isDocumentFragment(rootNode) && isShadowRoot(rootNode))) {
+        rootNode.adoptedStyleSheets.splice(rootNode.adoptedStyleSheets.indexOf(stylesheet), 1);
+      }
+    }
+    previousRootNodes = newRootNodes;
+  });
 
   const disposeOfElementsEffect = effect(() => {
     const added = extendedElementsWithIssues.value.filter(elementWithIssues => {
-      return !previousExtendedElementsWithIssues.some(previousElementWithIssues => previousElementWithIssues.element === elementWithIssues.element);
+      return !previousExtendedElementsWithIssues.some(previousElementWithIssues => areElementsWithIssuesEqual(previousElementWithIssues, elementWithIssues));
     });
     const removed = previousExtendedElementsWithIssues.filter(previousElementWithIssues => {
-      return !extendedElementsWithIssues.value.some(elementWithIssues => elementWithIssues.element === previousElementWithIssues.element);
+      return !extendedElementsWithIssues.value.some(elementWithIssues => areElementsWithIssuesEqual(elementWithIssues, previousElementWithIssues));
     });
     removeIssues(removed);
     setIssues(added);
@@ -106,7 +122,7 @@ export default function createDomUpdater(name: string, intersectionObserver?: In
   });
 
   return () => {
-    removeStylesheet();
+    disposeOfStyleSheetsEffect();
     disposeOfElementsEffect();
   };
 }

package/src/elements/accented-dialog.ts

@@ -56,20 +56,45 @@ export default () => {
     :host {
       all: initial !important;
 
-      --light-color: white;
-      --dark-color: black;
-      --focus-color: #0078d4; /* Contrasts with both white and black. */
+      /* OKLCH stuff: https://oklch.com/ */
+      --light-color: oklch(0.98 0 0);
+      --dark-color: oklch(0.22 0 0);
+
+      --background-color: light-dark(var(--light-color), var(--dark-color));
+      --text-color: light-dark(var(--dark-color), var(--light-color));
+
+      --impact-lightness: 0.80;
+      --focus-lightness: 0.45;
+      @media (prefers-color-scheme: dark) {
+        --impact-lightness: 0.45;
+        --focus-lightness: 0.80;
+      }
+
+      --blue-hue: 230;
+      --gold-hue: 90;
+      --red-hue: 0;
+
+      /* Contrasts with background. */
+      --focus-color: oklch(var(--focus-lightness) 0.25 var(--blue-hue));
+
+      --impact-chroma: 0.16;
 
-      --impact-minor-color: lightgray;
-      --impact-moderate-color: gold;
-      --impact-serious-color: #ff9e00;
-      --impact-critical-color: #f883ec;
+      --impact-moderate-hue: var(--blue-hue);
+      --impact-serious-hue: var(--gold-hue);
+      --impact-critical-hue: var(--red-hue);
+
+      --impact-minor-color: oklch(var(--impact-lightness) 0 0);
+      --impact-moderate-color: oklch(var(--impact-lightness) var(--impact-chroma) var(--impact-moderate-hue));
+      --impact-serious-color: oklch(var(--impact-lightness) var(--impact-chroma) var(--impact-serious-hue));
+      --impact-critical-color: oklch(var(--impact-lightness) var(--impact-chroma) var(--impact-critical-hue));
+
+      --base-size: max(1rem, 16px);
 
       /* Spacing and typography custom props, inspired by https://utopia.fyi (simplified). */
 
       /* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,16,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
       --ratio: 1.2;
-      --step-0: 1rem;
+      --step-0: var(--base-size);
       --step-1: calc(var(--step-0) * var(--ratio));
       --step-2: calc(var(--step-1) * var(--ratio));
       --step-3: calc(var(--step-2) * var(--ratio));
@@ -77,15 +102,15 @@ export default () => {
       --step--1: calc(var(--step-0) / var(--ratio));
 
       /* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,16,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
-      --space-3xs: 0.25rem;
-      --space-2xs: 0.5rem;
-      --space-xs: 0.75rem;
-      --space-s: 1rem;
-      --space-m: 1.5rem;
-      --space-l: 2rem;
-      --space-xl: 3rem;
-      --space-2xl: 4rem;
-      --space-3xl: 6rem;
+      --space-3xs: calc(0.25 * var(--base-size));
+      --space-2xs: calc(0.5 * var(--base-size));
+      --space-xs: calc(0.75 * var(--base-size));
+      --space-s: var(--base-size);
+      --space-m: calc(1.5 * var(--base-size));
+      --space-l: calc(2 * var(--base-size));
+      --space-xl: calc(3 * var(--base-size));
+      --space-2xl: calc(4 * var(--base-size));
+      --space-3xl: calc(6 * var(--base-size));
     }
 
     a[href], button {
@@ -116,12 +141,15 @@ export default () => {
       overflow-wrap: break-word;
       font-family: system-ui;
       line-height: 1.5;
-      background-color: var(--light-color);
-      color: var(--dark-color);
+      text-wrap: pretty;
+      background-color: var(--background-color);
+      color: var(--text-color);
       border: 2px solid currentColor;
       padding: var(--space-l);
       inline-size: min(90ch, calc(100% - var(--space-s)* 2));
       max-block-size: calc(100% - var(--space-s) * 2);
+
+      color-scheme: light dark;
     }
 
     #button-container {
@@ -129,8 +157,8 @@ export default () => {
     }
 
     #close {
-      background-color: var(--light-color);
-      color: var(--dark-color);
+      background-color: var(--background-color);
+      color: var(--text-color);
       border: 2px solid currentColor;
       padding-inline: var(--space-2xs);
       aspect-ratio: 1 / 1;
@@ -167,7 +195,7 @@ export default () => {
       }
 
       a {
-        font-weight: bold;
+        font-weight: 500;
       }
     }
 

package/src/elements/accented-trigger.ts

@@ -12,8 +12,6 @@ export interface AccentedTrigger extends HTMLElement {
   visible: Signal<boolean> | undefined;
 }
 
-const triggerSize = 'max(32px, 2rem)';
-
 // We want Accented to not throw an error in Node, and use static imports,
 // so we can't export `class extends HTMLElement` because HTMLElement is not available in Node.
 export default (name: string) => {
@@ -27,6 +25,8 @@ export default (name: string) => {
   template.innerHTML = `
     <style>
       :host {
+        --ratio: 1.2;
+        --base-size: max(1rem, 16px);
         position: fixed !important;
         inset-inline-start: anchor(self-start) !important;
         inset-inline-end: anchor(self-end) !important;
@@ -45,12 +45,17 @@ export default (name: string) => {
         pointer-events: auto;
 
         position: absolute;
-        inset-inline-end: 0;
+        inset-block-start: 4px;
+        inset-inline-end: 4px;
 
         box-sizing: border-box;
-        font-size: 1rem;
-        inline-size: ${triggerSize};
-        block-size: ${triggerSize};
+        font-size: calc(var(--ratio) * var(--ratio) * var(--base-size));
+        inline-size: calc(2 * var(--base-size));
+        block-size: calc(2 * var(--base-size));
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
         /* Make it look better in forced-colors mode. */
         border: 2px solid transparent;
@@ -58,6 +63,10 @@ export default (name: string) => {
         background-color: var(--${name}-primary-color);
         color: var(--${name}-secondary-color);
 
+        padding: 0;
+
+        border-radius: calc(0.25 * var(--base-size));
+
         outline-offset: -4px;
         outline-color: currentColor;
         outline-width: 2px;
@@ -72,7 +81,7 @@ export default (name: string) => {
         }
       }
     </style>
-    <button id="trigger" lang="en">⚠</button>
+    <button id="trigger" lang="en">!</button>
   `;
 
   return class extends HTMLElement implements AccentedTrigger {
@@ -135,8 +144,14 @@ export default (name: string) => {
           this.#abortController = new AbortController();
           trigger?.addEventListener('click', (event) => {
             try {
+              // event.preventDefault() ensures that if the issue is within a link,
+              // the link's default behavior (following the URL) is prevented.
               event.preventDefault();
 
+              // event.stopPropagation() ensures that if there's a click handler on the trigger's ancestor
+              // (a link, or a button, or anything else), it doesn't get triggered.
+              event.stopPropagation();
+
               // We append the dialog when the button is clicked,
               // and remove it from the DOM when the dialog is closed.
               // This gives us a performance improvement since Axe
@@ -206,9 +221,17 @@ export default (name: string) => {
     }
 
     #setTransform() {
-      if (this.element) {
-        this.style.setProperty('transform', window.getComputedStyle(this.element).getPropertyValue('transform'), 'important');
-      }
+      // We read and write values in separate animation frames to avoid layout thrashing.
+      window.requestAnimationFrame(() => {
+        if (this.element) {
+          const transform = window.getComputedStyle(this.element).getPropertyValue('transform');
+          if (transform !== 'none') {
+            window.requestAnimationFrame(() => {
+              this.style.setProperty('transform', transform, 'important');
+            });
+          }
+        }
+      });
     }
   };
 };

package/src/fullscreen-listener.ts

@@ -0,0 +1,17 @@
+import logAndRethrow from './log-and-rethrow.js';
+import recalculatePositions from './utils/recalculate-positions.js';
+
+export default function setupResizeListener() {
+  const abortController = new AbortController();
+  window.addEventListener('fullscreenchange', () => {
+    try {
+      recalculatePositions();
+    } catch (error) {
+      logAndRethrow(error);
+    }
+  }, { signal: abortController.signal });
+
+  return () => {
+    abortController.abort();
+  };
+};

package/src/scanner.ts

@@ -6,8 +6,9 @@ import updateElementsWithIssues from './utils/update-elements-with-issues.js';
 import recalculatePositions from './utils/recalculate-positions.js';
 import recalculateScrollableAncestors from './utils/recalculate-scrollable-ancestors.js';
 import supportsAnchorPositioning from './utils/supports-anchor-positioning.js';
-import { issuesUrl } from './constants.js';
+import { getAccentedElementNames, issuesUrl } from './constants.js';
 import logAndRethrow from './log-and-rethrow.js';
+import createShadowDOMAwareMutationObserver from './utils/shadow-dom-aware-mutation-observer.js';
 
 export default function createScanner(name: string, axeContext: AxeContext, axeOptions: AxeOptions, throttle: Required<Throttle>, callback: Callback) {
   const axeRunningWindowProp = `__${name}_axe_running__`;
@@ -22,7 +23,7 @@ export default function createScanner(name: string, axeContext: AxeContext, axeO
 
     try {
 
-      performance.mark('axe-start');
+      performance.mark('scan-start');
 
       win[axeRunningWindowProp] = true;
 
@@ -54,17 +55,27 @@ export default function createScanner(name: string, axeContext: AxeContext, axeO
       }
       win[axeRunningWindowProp] = false;
 
-      const axeMeasure = performance.measure('axe', 'axe-start');
+      const scanMeasure = performance.measure('scan', 'scan-start');
+      const scanDuration = Math.round(scanMeasure.duration);
 
       if (!enabled.value) {
         return;
       }
 
+      performance.mark('dom-update-start');
+
       updateElementsWithIssues(extendedElementsWithIssues, result.violations, window, name);
 
+      const domUpdateMeasure = performance.measure('dom-update', 'dom-update-start');
+      const domUpdateDuration = Math.round(domUpdateMeasure.duration);
+
       callback({
         elementsWithIssues: elementsWithIssues.value,
-        scanDuration: Math.round(axeMeasure.duration)
+        performance: {
+          totalBlockingTime: scanDuration + domUpdateDuration,
+          scan: scanDuration,
+          domUpdate: domUpdateDuration
+        }
       });
     } catch (error) {
       win[axeRunningWindowProp] = false;
@@ -77,8 +88,8 @@ export default function createScanner(name: string, axeContext: AxeContext, axeO
   // if that's an element or array of elements (not a selector).
   taskQueue.add(document);
 
-  const accentedElementNames = [`${name}-trigger`, `${name}-dialog`];
-  const mutationObserver = new MutationObserver(mutationList => {
+  const accentedElementNames = getAccentedElementNames(name);
+  const mutationObserver = createShadowDOMAwareMutationObserver(name, mutationList => {
     try {
       // We're not interested in mutations that are caused exclusively by the custom elements
       // introduced by Accented.

package/src/state.ts

@@ -8,10 +8,18 @@ export const extendedElementsWithIssues = signal<Array<ExtendedElementWithIssues
 
 export const elementsWithIssues = computed<Array<ElementWithIssues>>(() => extendedElementsWithIssues.value.map(extendedElementWithIssues => ({
   element: extendedElementWithIssues.element,
+  rootNode: extendedElementWithIssues.rootNode,
   issues: extendedElementWithIssues.issues.value
 })));
 
-export const scrollableAncestors = computed<Set<HTMLElement>>(() =>
+export const rootNodes = computed<Set<Node>>(() =>
+  new Set(
+    (enabled.value ? [document as Node] : [])
+      .concat(...(extendedElementsWithIssues.value.map(extendedElementWithIssues => extendedElementWithIssues.rootNode)))
+  )
+);
+
+export const scrollableAncestors = computed<Set<Element>>(() =>
   extendedElementsWithIssues.value.reduce(
     (scrollableAncestors, extendedElementWithIssues) => {
       for (const scrollableAncestor of extendedElementWithIssues.scrollableAncestors.value) {
@@ -19,6 +27,6 @@ export const scrollableAncestors = computed<Set<HTMLElement>>(() =>
       }
       return scrollableAncestors;
     },
-    new Set<HTMLElement>()
+    new Set<Element>()
   )
 );

package/src/types.ts

@@ -42,9 +42,17 @@ type CallbackParams = {
   elementsWithIssues: Array<ElementWithIssues>,
 
   /**
-   * How long the scan took in milliseconds.
+   * * `performance`: runtime performance of the last scan. An object:
+   * * `totalBlockingTime`: how long the main thread was blocked by Accented during the last scan, in milliseconds.
+   *   It’s further divided into the `scan` and `domUpdate` phases.
+   * * `scan`: how long the `scan` phase took, in milliseconds.
+   * * `domUpdate`: how long the `domUpdate` phase took, in milliseconds.
    * */
-  scanDuration: number
+  performance: {
+    totalBlockingTime: number,
+    scan: number,
+    domUpdate: number
+  }
 }
 
 export type Callback = (params: CallbackParams) => void;
@@ -141,16 +149,21 @@ export type Issue = {
   impact: axe.ImpactValue
 };
 
-export type ElementWithIssues = {
+export type BaseElementWithIssues = {
   element: HTMLElement,
+  rootNode: Node
+};
+
+export type ElementWithIssues = BaseElementWithIssues &{
   issues: Array<Issue>
-}
+};
 
-export type ExtendedElementWithIssues = Omit<ElementWithIssues, 'issues'> & {
+export type ExtendedElementWithIssues = BaseElementWithIssues & {
   issues: Signal<ElementWithIssues['issues']>,
   visible: Signal<boolean>,
   trigger: AccentedTrigger,
   position: Signal<Position>,
-  scrollableAncestors: Signal<Set<HTMLElement>>
+  anchorNameValue: string,
+  scrollableAncestors: Signal<Set<Element>>
   id: number
 };

package/src/utils/are-elements-with-issues-equal.ts

@@ -0,0 +1,9 @@
+import type { BaseElementWithIssues } from "../types";
+
+export default function areElementsWithIssuesEqual(
+  elementWithIssues1: BaseElementWithIssues,
+  elementWithIssues2: BaseElementWithIssues
+) {
+  return elementWithIssues1.element === elementWithIssues2.element
+    && elementWithIssues1.rootNode === elementWithIssues2.rootNode;
+}

package/src/utils/dom-helpers.ts

@@ -0,0 +1,22 @@
+export function isElement(node: Node): node is Element {
+  return typeof Node !== 'undefined' && node.nodeType === Node.ELEMENT_NODE;
+}
+
+export function isDocument(node: Node): node is Document {
+  return typeof Node !== 'undefined' && node.nodeType === Node.DOCUMENT_NODE;
+}
+
+export function isDocumentFragment(node: Node): node is DocumentFragment {
+  return typeof Node !== 'undefined' && node.nodeType === Node.DOCUMENT_FRAGMENT_NODE;
+}
+
+export function isShadowRoot(documentFragment: DocumentFragment): documentFragment is ShadowRoot {
+  return 'host' in documentFragment;
+}
+
+export function isHtmlElement(element: Element): element is HTMLElement {
+  // We can't use instanceof because it may not work across contexts
+  // (such as when an element is moved from an iframe).
+  // This heuristic seems to be the most robust and fastest that I could think of.
+  return element.constructor.name.startsWith('HTML');
+}

package/src/utils/get-element-position.ts

@@ -1,5 +1,6 @@
 import type { Position } from '../types';
-import isHtmlElement from './is-html-element.js';
+import { isHtmlElement } from './dom-helpers.js';
+import getParent from './get-parent.js';
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Containing_block#identifying_the_containing_block
 function isContainingBlock(element: Element, win: Window): boolean {
@@ -13,9 +14,9 @@ function isContainingBlock(element: Element, win: Window): boolean {
 
 function getNonInitialContainingBlock(element: Element, win: Window): Element | null {
   let currentElement: Element | null = element;
-  while (currentElement?.parentElement) {
-    currentElement = currentElement.parentElement;
-    if (isContainingBlock(currentElement, win)) {
+  while (currentElement) {
+    currentElement = getParent(currentElement);
+    if (currentElement && isContainingBlock(currentElement, win)) {
       return currentElement;
     }
   }

package/src/utils/get-parent.ts

@@ -0,0 +1,14 @@
+import { isDocumentFragment, isShadowRoot } from './dom-helpers.js';
+
+export default function getParent (element: Element): Element | null {
+  if (element.parentElement) {
+    return element.parentElement;
+  }
+
+  const rootNode = element.getRootNode();
+  if (isDocumentFragment(rootNode) && isShadowRoot(rootNode)) {
+    return rootNode.host;
+  }
+
+  return null;
+}

package/src/utils/get-scrollable-ancestors.ts

@@ -1,10 +1,15 @@
+import getParent from './get-parent.js';
+
 const scrollableOverflowValues = new Set(['auto', 'scroll', 'hidden']);
 
-export default function getScrollableAncestors (element: HTMLElement, win: Window) {
-  let currentElement = element;
-  let scrollableAncestors = new Set<HTMLElement>();
-  while (currentElement.parentElement) {
-    currentElement = currentElement.parentElement;
+export default function getScrollableAncestors (element: Element, win: Window) {
+  let currentElement: Element | null = element;
+  let scrollableAncestors = new Set<Element>();
+  while (true) {
+    currentElement = getParent(currentElement);
+    if (!currentElement) {
+      break;
+    }
     const computedStyle = win.getComputedStyle(currentElement);
     if (scrollableOverflowValues.has(computedStyle.overflowX) || scrollableOverflowValues.has(computedStyle.overflowY)) {
       scrollableAncestors.add(currentElement);