Skip to content

Add positionAreaContainingBlock option#412

Draft
jpzwarte wants to merge 2 commits into
oddbird:mainfrom
jpzwarte:fix/411-wrapping-element-breaks-css
Draft

Add positionAreaContainingBlock option#412
jpzwarte wants to merge 2 commits into
oddbird:mainfrom
jpzwarte:fix/411-wrapping-element-breaks-css

Conversation

@jpzwarte

@jpzwarte jpzwarte commented Jun 12, 2026

Copy link
Copy Markdown
Contributor

Closes #411

Adds a positionAreaContainingBlock option (default: true) to control how position-area is polyfilled.

  • true (default): The target is wrapped with a <polyfill-position-area> element that approximates the containing block created by position-area. Alignment is applied via justify-self/align-self on the target within that wrapper.
  • false: No wrapper element is inserted. Instead, the polyfill resolves the position-area alignment to concrete inset values and applies them directly on the target. This avoids breaking selectors that depend on a direct DOM relationship (e.g. > target, + target, :nth-child()), but comes with trade-offs around inset overrides, self-alignment, and overflow alignment (documented in the README and position-area.html).

…not wrap the element when using position-area
@netlify

netlify Bot commented Jun 12, 2026

Copy link
Copy Markdown

Deploy Preview for anchor-polyfill ready!

Name Link
🔨 Latest commit 4b53b9f
🔍 Latest deploy log https://app.netlify.com/projects/anchor-polyfill/deploys/6a2bd6b5dfba16000821370a
😎 Deploy Preview https://deploy-preview-412--anchor-polyfill.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Jun 12, 2026

Copy link
Copy Markdown

Deploy Preview for anchor-position-wpt canceled.

Name Link
🔨 Latest commit 4b53b9f
🔍 Latest deploy log https://app.netlify.com/projects/anchor-position-wpt/deploys/6a2bd6b44c6ceb0008d5d07a

@jamesnw

jamesnw commented Jun 14, 2026

Copy link
Copy Markdown
Contributor

Thanks for taking a look at this! I haven't done a full review, but wanted to note the questions I will be considering when reviewing.

  1. What are the differences between having a containing block and not? (See https://www.oddbird.net/2025/02/25/anchor-position-area/#a-new-containing-block)
  2. Can we programmatically discover when a containing block will have an impact?
  3. How do we want to expose this? Is a global setting for the polyfill sufficient? Or maybe some way of disabling the containing block for certain elements? A data-anchor-position-polyfill-disable-cb attribute, or --anchor-position-polyfill-disable custom property? I don't like the idea of leaving cleanup for when the polyfill can be removed, but control could be useful. I also want to avoid something that people opt out of because it fixes one problem, and then get surprised by the other differences.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG] Wrapping the element in <polyfill-position-area> may break existing CSS

2 participants