[BUG] Inline styles inside shadow roots are never collected

[jgerigmeyer]

What happens

fetchCSS uses options.roots for <link>/<style> elements, but the inline-style scan is hardcoded to the document: fetchCSS uses querySelectorAllRoots(options.roots, 'link, style') (src/fetch.ts:138), while fetchInlineStyles uses document.querySelectorAll(...) and never receives roots at all.

So an element inside a shadow root with style="anchor-name: --a" or style="top: anchor(--a end)" is never collected, and passing the shadow root in roots explicitly makes no difference.

Reproduction

document.body.innerHTML = `<div id="host"></div>`;
const root = document.getElementById('host').attachShadow({ mode: 'open' });
root.innerHTML = `
  <div style="anchor-name: --a">Anchor</div>
  <div style="position: absolute; top: anchor(--a end)">Target</div>
`;

const styleData = await fetchCSS({ roots: [document, root] });
// styleData.length === 0
// root.querySelectorAll('[data-has-inline-styles]').length === 0

This also means the per-shadow-root runs set up by patchAndPolyfillConstructedStylesheets (src/shadow.ts:29-37) each scan the whole light DOM for inline styles instead of their own shadow root.

Suggested fix

Pass options.roots through to fetchInlineStyles and use querySelectorAllRoots(options.roots, '[style]').

Related

• elements option should find inline styles on descendent elements #289 is the light-DOM sibling of the same problem (elements doesn't find inline styles on descendants).
• Anchors and targets in shadow dom #191 is about cross-boundary anchoring semantics, not collection.