diff --git a/README.md b/README.md index bde6c2ea..575d6948 100644 --- a/README.md +++ b/README.md @@ -71,6 +71,7 @@ value of `window.ANCHOR_POSITIONING_POLYFILL_OPTIONS`. window.ANCHOR_POSITIONING_POLYFILL_OPTIONS = { elements: undefined, excludeInlineStyles: false, + roots: [document], useAnimationFrame: false, }; import("https://unpkg.com/@oddbird/css-anchor-positioning"); @@ -89,6 +90,7 @@ an argument. polyfill({ elements: undefined, excludeInlineStyles: false, + roots: [document], useAnimationFrame: false, }); } @@ -115,6 +117,15 @@ defined. When set to `true`, elements with eligible inline styles listed in the `elements` option will still be polyfilled, but no other elements in the document will be implicitly polyfilled. +### roots + +type: `(Document | HTMLElement)[]`, default: `[document]` + +By default the polyfill applies to `document`, but you can configure one or more +shadow roots the polyfill should apply to using this option. See the +[shadow DOM examples](https://anchor-positioning.oddbird.net/shadow-dom) to learn +more. + ### useAnimationFrame type: `boolean`, default: `false` @@ -150,7 +161,7 @@ following features: `align-items` properties - `position-visibility` property - dynamically added/removed anchors or targets -- anchors or targets in the shadow-dom +- anchors and targets in separate shadow roots (see https://github.com/oddbird/css-anchor-positioning/issues/191) - anchors or targets in constructed stylesheets (https://github.com/oddbird/css-anchor-positioning/issues/228) - anchor functions assigned to `inset-*` properties or `inset` shorthand diff --git a/index.html b/index.html index 3219b58e..ba6e053a 100644 --- a/index.html +++ b/index.html @@ -1379,6 +1379,16 @@

color: var(--brand-orange); } +

+ + Positioning within the shadow DOM +

+ The polyfill can position targets and anchors inside a shadow root. See + shadow DOM examples. +

Sponsor OddBird’s OSS Work

diff --git a/public/anchor-shadow-root.css b/public/anchor-shadow-root.css new file mode 100644 index 00000000..67660003 --- /dev/null +++ b/public/anchor-shadow-root.css @@ -0,0 +1,9 @@ +#shadow-anchor-positioning { + anchor-name: --shadow-anchor-positioning; +} + +#shadow-target-positioning { + position: absolute; + right: anchor(--shadow-anchor-positioning right, 50px); + top: anchor(--shadow-anchor-positioning bottom); +} diff --git a/shadow-dom.html b/shadow-dom.html new file mode 100644 index 00000000..ce57853a --- /dev/null +++ b/shadow-dom.html @@ -0,0 +1,214 @@ + + + + + + + CSS Anchor Positioning Polyfill + + + + + + + + + + + + + + +

CSS Anchor Positioning Polyfill

+ + +

Anchoring Elements in the shadow DOM

+ Note: We strive to keep the polyfill up-to-date with + ongoing changes to the spec, and we welcome + code contributions + and financial support to make that happen. +

+ + Works if anchor and target are both inside the same shadow root +

+ + + +

+ With polyfill applied: Target and Anchor’s right edges line up. + Target’s top edge lines up with the bottom edge of the Anchor. +

+ Note: this will not work across shadow root + boundaries, and will not work with constructed stylesheets. +

+ +

<anchor-web-component>
+  <template shadowrootmode="open">
+    <style>
+    #my-anchor-positioning {
+      anchor-name: --my-anchor-positioning;
+    }
+
+    #my-target-positioning {
+      position: absolute;
+      top: anchor(--my-anchor-positioning bottom);
+      right: anchor(--my-anchor-positioning right, 50px);
+    }
+    </style>
+    <div style="position: relative">
+      <div id="my-target-positioning">Target</div>
+      <div id="my-anchor-positioning">Anchor</div>
+    </div>
+  </template>
+</anchor-web-component>
+<script>
+class AnchorDemo extends HTMLElement {
+  connectedCallback() {
+    window.ANCHOR_POSITIONING_POLYFILL({ roots: [this.shadowRoot] });
+  }
+}
+customElements.define("anchor-web-component", AnchorDemo);
+</script>
+

+ + + + diff --git a/src/dom.ts b/src/dom.ts index 95ed6ffd..94d9a30e 100644 --- a/src/dom.ts +++ b/src/dom.ts @@ -2,6 +2,7 @@ import { platform, type VirtualElement } from '@floating-ui/dom'; import { nanoid } from 'nanoid/non-secure'; import { SHIFTED_PROPERTIES } from './cascade.js'; +import { type AnchorPositioningRoot } from './polyfill.js'; /** * Representation of a CSS selector that allows getting the element part and @@ -140,18 +141,19 @@ function getContainerScrollPosition(element: HTMLElement) { * Like `document.querySelectorAll`, but if the selector has a pseudo-element it * will return a wrapper for the rest of the polyfill to use. */ -export function getElementsBySelector(selector: Selector) { +export function getElementsBySelector( + selector: Selector, + options: { roots: AnchorPositioningRoot[] }, +) { const { elementPart, pseudoElementPart } = selector; const result: (HTMLElement | PseudoElement)[] = []; const isBefore = pseudoElementPart === '::before'; const isAfter = pseudoElementPart === '::after'; - // Current we only support `::before` and `::after` pseudo-elements. + // Currently we only support `::before` and `::after` pseudo-elements. if (pseudoElementPart && !(isBefore || isAfter)) return result; - const elements = Array.from( - document.querySelectorAll(elementPart), - ); + const elements = querySelectorAllRoots(options.roots, elementPart); if (!pseudoElementPart) { result.push(...elements); @@ -255,3 +257,12 @@ export const getOffsetParent = async (el: HTMLElement) => { } return offsetParent as HTMLElement; }; + +export const querySelectorAllRoots = ( + roots: AnchorPositioningRoot[], + selector: string, +): HTMLElement[] => { + return roots.flatMap( + (e) => [...e.querySelectorAll(selector)] as HTMLElement[], + ); +}; diff --git a/src/fetch.ts b/src/fetch.ts index 725bb156..b9dab946 100644 --- a/src/fetch.ts +++ b/src/fetch.ts @@ -1,5 +1,7 @@ import { nanoid } from 'nanoid/non-secure'; +import { querySelectorAllRoots } from './dom.js'; +import { type NormalizedAnchorPositioningPolyfillOptions } from './polyfill.js'; import { type StyleData } from './utils.js'; const INVALID_MIME_TYPE_ERROR = 'InvalidMimeType'; @@ -96,11 +98,10 @@ function fetchInlineStyles(elements?: HTMLElement[]) { } export async function fetchCSS( - elements?: HTMLElement[], - excludeInlineStyles?: boolean, + options: NormalizedAnchorPositioningPolyfillOptions, ): Promise { const targetElements: HTMLElement[] = - elements ?? Array.from(document.querySelectorAll('link, style')); + options.elements ?? querySelectorAllRoots(options.roots, 'link, style'); const sources: Partial[] = []; targetElements @@ -117,7 +118,9 @@ export async function fetchCSS( } }); - const elementsForInlines = excludeInlineStyles ? (elements ?? []) : undefined; + const elementsForInlines = options.excludeInlineStyles + ? (options.elements ?? []) + : undefined; const inlines = fetchInlineStyles(elementsForInlines); diff --git a/src/parse.ts b/src/parse.ts index 1bd509c9..b1bf7848 100644 --- a/src/parse.ts +++ b/src/parse.ts @@ -14,9 +14,14 @@ import { AnchorScopeValue, getCSSPropertyValue, type PseudoElement, + querySelectorAllRoots, type Selector, } from './dom.js'; import { parsePositionFallbacks, type PositionTryOrder } from './fallback.js'; +import type { + AnchorPositioningRoot, + NormalizedAnchorPositioningPolyfillOptions, +} from './polyfill.js'; import { activeWrapperStyles, addPositionAreaDeclarationBlockStyles, @@ -260,7 +265,8 @@ function getAnchorFunctionData(node: CssNode, declaration: Declaration | null) { async function getAnchorEl( targetEl: HTMLElement | null, - anchorObj?: AnchorFunction, + anchorObj: AnchorFunction | null, + options: { roots: AnchorPositioningRoot[] }, ) { let anchorName = anchorObj?.anchorName; const customPropName = anchorObj?.customPropName; @@ -288,10 +294,14 @@ async function getAnchorEl( anchorName || null, anchorSelectors, [...allScopeSelectors, ...anchorNameScopeSelectors], + { roots: options.roots }, ); } -export async function parseCSS(styleData: StyleData[]) { +export async function parseCSS( + styleData: StyleData[], + options: NormalizedAnchorPositioningPolyfillOptions, +) { const anchorFunctions: AnchorFunctionDeclarations = {}; const positionAreas: PositionAreaDeclarations = {}; resetStores(); @@ -686,16 +696,19 @@ export async function parseCSS(styleData: StyleData[]) { const inlineStyles = new Map>(); // Store any `anchor()` fns for (const [targetSel, anchorFns] of Object.entries(anchorFunctions)) { - let targets: NodeListOf; + let targets: HTMLElement[]; if ( targetSel.startsWith('[data-anchor-polyfill=') && fallbackTargets[targetSel]?.length ) { // If we're dealing with a `@position-try` block, // then the targets are places where that `position-fallback` is used. - targets = document.querySelectorAll(fallbackTargets[targetSel].join(',')); + targets = querySelectorAllRoots( + options.roots, + fallbackTargets[targetSel].join(','), + ); } else { - targets = document.querySelectorAll(targetSel); + targets = querySelectorAllRoots(options.roots, targetSel); } for (const [targetProperty, anchorObjects] of Object.entries(anchorFns) as [ InsetProperty | SizingProperty, @@ -704,7 +717,9 @@ export async function parseCSS(styleData: StyleData[]) { for (const anchorObj of anchorObjects) { for (const targetEl of targets) { // For every target element, find a valid anchor element - const anchorEl = await getAnchorEl(targetEl, anchorObj); + const anchorEl = await getAnchorEl(targetEl, anchorObj, { + roots: options.roots, + }); const uuid = `--anchor-${nanoid(12)}`; // Store new mapping, in case inline styles have changed and will // be overwritten -- in which case new mappings will be re-added @@ -754,11 +769,12 @@ export async function parseCSS(styleData: StyleData[]) { // .foo { position-area: end } for (const [targetSel, positions] of Object.entries(positionAreas)) { - const targets: NodeListOf = - document.querySelectorAll(targetSel); + const targets = querySelectorAllRoots(options.roots, targetSel); for (const targetEl of targets) { // For every target element, find a valid anchor element. - const anchorEl = await getAnchorEl(targetEl); + const anchorEl = await getAnchorEl(targetEl, null, { + roots: options.roots, + }); // For every position-area declaration with this selector, create a new // UUID, and make sure the target has a wrapper. for (const positionData of positions) { diff --git a/src/polyfill.ts b/src/polyfill.ts index 7398c141..54fe6c12 100644 --- a/src/polyfill.ts +++ b/src/polyfill.ts @@ -545,6 +545,8 @@ async function position(rules: AnchorPositions, useAnimationFrame = false) { } } +export type AnchorPositioningRoot = Document | HTMLElement; + export interface AnchorPositioningPolyfillOptions { // Whether to use `requestAnimationFrame()` when updating target elements’ // positions @@ -553,6 +555,12 @@ export interface AnchorPositioningPolyfillOptions { // An array of explicitly targeted elements to polyfill elements?: HTMLElement[]; + /** + * Set the root elements that are queried when looking for anchors and targets. + * @default document + */ + roots?: AnchorPositioningRoot[]; + // Whether to exclude elements with eligible inline styles. When not defined // or set to `false`, the polyfill will be applied to all elements that have // eligible inline styles, regardless of whether the `elements` option is @@ -562,9 +570,17 @@ export interface AnchorPositioningPolyfillOptions { excludeInlineStyles?: boolean; } +/** @internal */ +export interface NormalizedAnchorPositioningPolyfillOptions { + elements?: HTMLElement[]; + excludeInlineStyles?: boolean; + roots: AnchorPositioningRoot[]; + useAnimationFrame?: boolean; +} + function normalizePolyfillOptions( useAnimationFrameOrOption: boolean | AnchorPositioningPolyfillOptions = {}, -) { +): NormalizedAnchorPositioningPolyfillOptions { const options = typeof useAnimationFrameOrOption === 'boolean' ? { useAnimationFrame: useAnimationFrameOrOption } @@ -578,7 +594,13 @@ function normalizePolyfillOptions( options.elements = undefined; } - return Object.assign(options, { useAnimationFrame }); + if (!Array.isArray(options.roots) || options.roots.length === 0) { + options.roots = [document]; + } + + return Object.assign(options, { + useAnimationFrame, + }) as NormalizedAnchorPositioningPolyfillOptions; } // Support a boolean option for backwards compatibility. @@ -590,7 +612,7 @@ export async function polyfill( ); // fetch CSS from stylesheet and inline style - let styleData = await fetchCSS(options.elements, options.excludeInlineStyles); + let styleData = await fetchCSS(options); let rules: AnchorPositions = {}; let inlineStyles: Map> | undefined; @@ -609,7 +631,7 @@ export async function polyfill( styleData = transformCSS(styleData); } // parse CSS - const parsedCSS = await parseCSS(styleData); + const parsedCSS = await parseCSS(styleData, { roots: options.roots }); rules = parsedCSS.rules; inlineStyles = parsedCSS.inlineStyles; } catch (error) { diff --git a/src/validate.ts b/src/validate.ts index 4564c1f2..de702b36 100644 --- a/src/validate.ts +++ b/src/validate.ts @@ -8,6 +8,7 @@ import { hasStyle, type Selector, } from './dom.js'; +import { type AnchorPositioningRoot } from './polyfill.js'; // Given a target element's containing block (CB) and an anchor element, // determines if the anchor element is a descendant of the target CB. @@ -197,6 +198,7 @@ export async function validatedForPositioning( anchorName: string | null, anchorSelectors: Selector[], scopeSelectors: Selector[], + options: { roots: AnchorPositioningRoot[] }, ) { if ( !( @@ -211,7 +213,7 @@ export async function validatedForPositioning( const anchorElements = anchorSelectors // Any element that matches a selector that sets the specified `anchor-name` // could be a potential match. - .flatMap(getElementsBySelector) + .flatMap((sel) => getElementsBySelector(sel, options)) // Narrow down the potential match elements to just the ones whose computed // `anchor-name` matches the specified one. This accounts for the // `anchor-name` value that was actually applied by the CSS cascade. diff --git a/tests/e2e/shadow-dom.test.ts b/tests/e2e/shadow-dom.test.ts new file mode 100644 index 00000000..e2e3002d --- /dev/null +++ b/tests/e2e/shadow-dom.test.ts @@ -0,0 +1,59 @@ +import { expect, type Page, test } from '@playwright/test'; + +import { expectWithinOne } from './utils.js'; + +test.beforeEach(async ({ page }) => { + // Listen for all console logs + // eslint-disable-next-line no-console + page.on('console', (msg) => console.log(msg.text())); + await page.goto('/shadow-dom.html'); +}); + +const btnSelector = '#apply-polyfill'; + +async function applyPolyfill(page: Page) { + const btn = page.locator(btnSelector); + await btn.click(); + return await expect(btn).toBeDisabled(); +} + +async function getElementWidth(page: Page, sel: string) { + return page + .locator(sel) + .first() + .evaluate((node: HTMLElement) => node.getBoundingClientRect().width); +} + +async function getParentWidth(page: Page, sel: string) { + return page + .locator(sel) + .first() + .evaluate((node: HTMLElement) => node.offsetParent?.clientWidth ?? 0); +} + +async function getParentHeight(page: Page, sel: string) { + return page + .locator(sel) + .first() + .evaluate((node: HTMLElement) => node.offsetParent?.clientHeight ?? 0); +} + +test('applies polyfill inside shadow root', async ({ page }) => { + const shadowAnchorSelector = + 'anchor-web-component #shadow-anchor-positioning'; + const shadowTargetSelector = + 'anchor-web-component #shadow-target-positioning'; + const target = page.locator(shadowTargetSelector); + const width = await getElementWidth(page, shadowAnchorSelector); + const parentWidth = await getParentWidth(page, shadowTargetSelector); + const parentHeight = await getParentHeight(page, shadowTargetSelector); + const expected = parentWidth - width; + + await expect(target).toHaveCSS('top', '0px'); + await expectWithinOne(target, 'right', expected, true); + + await applyPolyfill(page); + + await expectWithinOne(target, 'top', parentHeight); + await expectWithinOne(target, 'right', expected); +}); diff --git a/tests/e2e/validate.test.ts b/tests/e2e/validate.test.ts index 1e29226d..c527dce5 100644 --- a/tests/e2e/validate.test.ts +++ b/tests/e2e/validate.test.ts @@ -421,6 +421,7 @@ test('when multiple anchor elements have the same name and are valid, the last i /* anchorName: */ null, [anchorSelector], /* scopeSelectors: */ [], + { roots: [document] }, ).then((value) => value); validatedData.results = { anchor }; @@ -515,6 +516,7 @@ test('target anchor element is first element el in tree order.', async ({ /* anchorName: */ null, [anchorSelector], /* scopeSelectors: */ [], + { roots: [document] }, ).then((value) => value); validatedData.results = { anchor }; diff --git a/tests/unit/fetch.test.ts b/tests/unit/fetch.test.ts index a22fc4d0..0f2a952f 100644 --- a/tests/unit/fetch.test.ts +++ b/tests/unit/fetch.test.ts @@ -23,7 +23,7 @@ describe('fetch stylesheet', () => { it('fetches CSS', async () => { const css = getSampleCSS('anchor-positioning'); fetchMock.getOnce('end:sample.css', requestWithCSSType(css)); - const styleData = await fetchCSS(); + const styleData = await fetchCSS({ roots: [document] }); expect(styleData).toHaveLength(2); expect(styleData[0].url?.toString()).toBe(`${location.origin}/sample.css`); @@ -82,7 +82,7 @@ describe('fetch inline styles', () => { it('fetch returns inline CSS', async () => { const css = getSampleCSS('anchor-positioning'); fetchMock.getOnce('end:sample.css', requestWithCSSType(css)); - const styleData = await fetchCSS(); + const styleData = await fetchCSS({ roots: [document] }); expect(styleData).toHaveLength(4); expect(styleData[2].url).toBeUndefined(); @@ -163,13 +163,17 @@ describe('fetch styles manually', () => { }); it('fetches only inline styles if `elements` is empty', async () => { - const styleData = await fetchCSS([]); + const styleData = await fetchCSS({ roots: [document], elements: [] }); expect(styleData).toHaveLength(2); }); it('fetches nothing if `elements` is empty and exclusing inline styles', async () => { - const styleData = await fetchCSS([], true); + const styleData = await fetchCSS({ + roots: [document], + elements: [], + excludeInlineStyles: true, + }); expect(styleData).toHaveLength(0); }); @@ -184,8 +188,9 @@ describe('fetch styles manually', () => { const el4 = document.getElementById('el4')!; const el5 = document.getElementById('el5')!; - const styleData = await fetchCSS( - [ + const styleData = await fetchCSS({ + roots: [document], + elements: [ el1, el2, el3, @@ -199,8 +204,8 @@ describe('fetch styles manually', () => { // @ts-expect-error should be ignored 123, ], - true, - ); + excludeInlineStyles: true, + }); expect(styleData).toHaveLength(4); diff --git a/tests/unit/parse.test.ts b/tests/unit/parse.test.ts index 813f1a66..1d368e92 100644 --- a/tests/unit/parse.test.ts +++ b/tests/unit/parse.test.ts @@ -13,7 +13,9 @@ describe('parseCSS', () => { }); it('handles css with no `anchor()` fn', async () => { - const { rules } = await parseCSS([{ css: sampleBaseCSS }] as StyleData[]); + const { rules } = await parseCSS([{ css: sampleBaseCSS }] as StyleData[], { + roots: [document], + }); expect(rules).toEqual({}); }); @@ -29,7 +31,9 @@ describe('parseCSS', () => { const targetEl = document.getElementById('my-target-positioning'); const css = getSampleCSS('anchor-positioning'); document.head.innerHTML = ``; - const { rules } = await parseCSS([{ css }] as StyleData[]); + const { rules } = await parseCSS([{ css }] as StyleData[], { + roots: [document], + }); const expected = { '#my-target-positioning': { @@ -67,7 +71,9 @@ describe('parseCSS', () => { '

'; const css = getSampleCSS('anchor-name-custom-prop'); document.head.innerHTML = ``; - const { rules } = await parseCSS([{ css }] as StyleData[]); + const { rules } = await parseCSS([{ css }] as StyleData[], { + roots: [document], + }); const expected = { '#my-target-name-prop': { declarations: { @@ -107,7 +113,9 @@ describe('parseCSS', () => { } `; document.head.innerHTML = ``; - const { rules } = await parseCSS([{ css }] as StyleData[]); + const { rules } = await parseCSS([{ css }] as StyleData[], { + roots: [document], + }); const expected = { '#f1': { declarations: { @@ -151,7 +159,9 @@ describe('parseCSS', () => { } `); document.head.innerHTML = ``; - const { rules } = await parseCSS([{ css }] as StyleData[]); + const { rules } = await parseCSS([{ css }] as StyleData[], { + roots: [document], + }); const expected = { '#my-target-1': { declarations: { @@ -208,7 +218,9 @@ describe('parseCSS', () => { } `); document.head.innerHTML = ``; - const { rules } = await parseCSS([{ css }] as StyleData[]); + const { rules } = await parseCSS([{ css }] as StyleData[], { + roots: [document], + }); const expected = { '#my-target-1': { declarations: { @@ -259,7 +271,9 @@ describe('parseCSS', () => { } `); document.head.innerHTML = ``; - const { rules } = await parseCSS([{ css }] as StyleData[]); + const { rules } = await parseCSS([{ css }] as StyleData[], { + roots: [document], + }); const expected = { '#f1': { declarations: { @@ -285,7 +299,9 @@ describe('parseCSS', () => { '

'; const css = getSampleCSS('anchor'); document.head.innerHTML = ``; - const { rules } = await parseCSS([{ css }] as StyleData[]); + const { rules } = await parseCSS([{ css }] as StyleData[], { + roots: [document], + }); const expected = { '#my-target': { declarations: { @@ -321,7 +337,9 @@ describe('parseCSS', () => { '

'; const css = getSampleCSS('anchor-custom-props'); document.head.innerHTML = ``; - const { rules } = await parseCSS([{ css }] as StyleData[]); + const { rules } = await parseCSS([{ css }] as StyleData[], { + roots: [document], + }); const expected = { '#my-target-props': { declarations: { @@ -357,7 +375,9 @@ describe('parseCSS', () => { '

'; const css = getSampleCSS('anchor-duplicate-custom-props'); document.head.innerHTML = ``; - const { rules } = await parseCSS([{ css }] as StyleData[]); + const { rules } = await parseCSS([{ css }] as StyleData[], { + roots: [document], + }); const expected = { '#target-duplicate-custom-props': { declarations: { @@ -425,7 +445,9 @@ describe('parseCSS', () => { '

'; const css = getSampleCSS('anchor-name-list'); document.head.innerHTML = ``; - const { rules } = await parseCSS([{ css }] as StyleData[]); + const { rules } = await parseCSS([{ css }] as StyleData[], { + roots: [document], + }); const expected = { '#my-target-name-list-a': { declarations: { @@ -485,7 +507,9 @@ describe('parseCSS', () => { '

'; const css = getSampleCSS('anchor-math'); document.head.innerHTML = ``; - const { rules } = await parseCSS([{ css }] as StyleData[]); + const { rules } = await parseCSS([{ css }] as StyleData[], { + roots: [document], + }); const expected = { '#my-target-math': { declarations: { @@ -542,7 +566,9 @@ describe('parseCSS', () => { } `); document.head.innerHTML = ``; - const { rules } = await parseCSS([{ css }] as StyleData[]); + const { rules } = await parseCSS([{ css }] as StyleData[], { + roots: [document], + }); const expected = { '.target': { declarations: { @@ -597,7 +623,9 @@ describe('parseCSS', () => { const anchorEl = document.getElementById('my-anchor-size'); const css = getSampleCSS('anchor-size'); document.head.innerHTML = ``; - const { rules } = await parseCSS([{ css }] as StyleData[]); + const { rules } = await parseCSS([{ css }] as StyleData[], { + roots: [document], + }); const expected = { '#my-target-size': { @@ -631,7 +659,9 @@ describe('parseCSS', () => { `; const css = getSampleCSS('position-try'); document.head.innerHTML = ``; - const { rules } = await parseCSS([{ css }] as StyleData[]); + const { rules } = await parseCSS([{ css }] as StyleData[], { + roots: [document], + }); const anchorEl = document.getElementById('my-anchor-fallback'); const targetEl = document.getElementById('my-target-fallback'); const anchor2El = document.getElementById('my-anchor-fallback-2'); @@ -764,7 +794,9 @@ describe('parseCSS', () => { position-fallback: --fallback; } `; - const { rules } = await parseCSS([{ css }] as StyleData[]); + const { rules } = await parseCSS([{ css }] as StyleData[], { + roots: [document], + }); expect(rules).toEqual({}); }); @@ -787,7 +819,9 @@ describe('parseCSS', () => { } `); document.head.innerHTML = ``; - const { rules } = await parseCSS([{ css }] as StyleData[]); + const { rules } = await parseCSS([{ css }] as StyleData[], { + roots: [document], + }); const li = document.querySelectorAll('li'); const positioned = document.querySelectorAll('.positioned'); const expected = { @@ -836,7 +870,9 @@ describe('parseCSS', () => { } `); document.head.innerHTML = ``; - const { rules } = await parseCSS([{ css }] as StyleData[]); + const { rules } = await parseCSS([{ css }] as StyleData[], { + roots: [document], + }); const expected = { '.positioned': { declarations: { @@ -878,7 +914,9 @@ describe('parseCSS', () => { } `); document.head.innerHTML = ``; - const { rules } = await parseCSS([{ css }] as StyleData[]); + const { rules } = await parseCSS([{ css }] as StyleData[], { + roots: [document], + }); const expected = { '.positioned': { declarations: { @@ -919,7 +957,9 @@ describe('parseCSS', () => { } `); document.head.innerHTML = ``; - const { rules } = await parseCSS([{ css }] as StyleData[]); + const { rules } = await parseCSS([{ css }] as StyleData[], { + roots: [document], + }); const expected = { '.positioned': { declarations: { @@ -959,7 +999,9 @@ describe('parseCSS', () => { } `); document.head.innerHTML = ``; - const { rules } = await parseCSS([{ css }] as StyleData[]); + const { rules } = await parseCSS([{ css }] as StyleData[], { + roots: [document], + }); const expected = { '.positioned': { declarations: { @@ -998,7 +1040,9 @@ describe('parseCSS', () => { } `); document.head.innerHTML = ``; - const { rules } = await parseCSS([{ css }] as StyleData[]); + const { rules } = await parseCSS([{ css }] as StyleData[], { + roots: [document], + }); const expected = { '.positioned': { declarations: { diff --git a/vite.config.ts b/vite.config.ts index 0fa56b2e..57bfc401 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -15,6 +15,7 @@ export default defineConfig({ input: { main: resolve(__dirname, 'index.html'), positionArea: resolve(__dirname, 'position-area.html'), + shadowDOM: resolve(__dirname, 'shadow-dom.html'), }, }, }

+ 🔗 + Positioning within the shadow DOM +

Sponsor OddBird’s OSS Work

Anchoring Elements in the shadow DOM

+ 🔗 + Works if anchor and target are both inside the same shadow root +

Sponsor OddBird’s OSS Work

+ + Positioning within the shadow DOM +

+ + Works if anchor and target are both inside the same shadow root +