oddbird / oddbird/css-anchor-positioning
[BUG] Inline styles inside shadow roots are never collected
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 493
- Forks
- 18
- Avg merge
- 12h 37m
- Merged PRs (30d)
- 5
Description
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
- #289 is the light-DOM sibling of the same problem (
elementsdoesn't find inline styles on descendants). - #191 is about cross-boundary anchoring semantics, not collection.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in src/fetch.ts at fetchCSS and fetchInlineStyles, then inspect the shadow-root calls in src/shadow.ts:29-37 and the existing querySelectorAllRoots helper. Pass the configured roots through the inline-style scan and verify the reproduction collects both shadow-root elements and marks them with data-has-inline-styles.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 84/100