Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Add anchor attribute#9144

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Open
josepharhar wants to merge35 commits intowhatwg:main
base:main
Choose a base branch
Loading
fromjosepharhar:anchor
Open

Conversation

josepharhar
Copy link
Contributor

@josepharharjosepharhar commentedApr 10, 2023•
edited by pr-previewbot
Loading

The anchor attribute can be used to set up CSS anchor positioning by setting an implicit anchor element:https://drafts.csswg.org/css-anchor-1/#implicit-anchor-element.

The CSS properties used to set up anchor positioning relationships are perfect for repeating patterns, such as:

<divclass=anchor></div><divclass=positioned></div><divclass=anchor></div><divclass=positioned></div><divclass=anchor></div><divclass=positioned></div><style>  .anchor {anchor-name:--foo; }  .positioned {position-anchor:--foo; }</style>

However, for structural patterns, such as when using a Popover, an HTML attribute has less boilerplate and makes the relationship much more directly observable:

<buttonid=button1>Pick something #1</button><divpopoveranchor=button1>Popover for button1</div>

This structural pattern can apply to other use cases also, where unique elements are paired.

When used with the Popover API, theanchor attribute also naturally helps to create a relationship that ensures popovers are properly nested:

<buttonid=button>Menu 1</button><menupopoveranchor=button><liid=item1>Item 1</li><liid=item2>Item 2</li></menu><menupopover=hintanchor=item1>  Helpful tooltip about item 1</menu><menupopover=hintanchor=item2>  Helpful tooltip about item 2</menu>

This PR adds theanchor attribute to HTML and connects it to the Popover API.

/dom.html (diff )
/index.html (diff )
/indices.html (diff )
/infrastructure.html (diff )
/popover.html (diff )
/references.html (diff )
/rendering.html (diff )

Shanukuttoth reacted with thumbs up emojilukewarlow reacted with hooray emojiWestbrook and vladimir-lu reacted with heart emoji
The anchor attribute can be used to set up CSS anchor positioning bysetting an implicit anchor element:https://drafts.csswg.org/css-anchor-1/#implicit-anchor-element
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this pull requestApr 17, 2023
This patch also adds WPTs for the anchor attribute (without popovers)to support the HTML PRwhatwg/html#9144Fixed: 1432016Change-Id: I3e80326268008e6beaf74389bb32c01050406a81
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this pull requestApr 17, 2023
This patch also adds WPTs for the anchor attribute (without popovers)to support the HTML PRwhatwg/html#9144Fixed: 1432016Change-Id: I3e80326268008e6beaf74389bb32c01050406a81Reviewed-on:https://chromium-review.googlesource.com/c/chromium/src/+/4434155Commit-Queue: Joey Arhar <jarhar@chromium.org>Commit-Queue: Xiaocheng Hu <xiaochengh@chromium.org>Reviewed-by: Joey Arhar <jarhar@chromium.org>Code-Coverage: Findit <findit-for-me@appspot.gserviceaccount.com>Auto-Submit: Xiaocheng Hu <xiaochengh@chromium.org>Cr-Commit-Position: refs/heads/main@{#1131479}
aarongable pushed a commit to chromium/chromium that referenced this pull requestApr 17, 2023
This patch also adds WPTs for the anchor attribute (without popovers)to support the HTML PRwhatwg/html#9144Fixed:1432016Change-Id: I3e80326268008e6beaf74389bb32c01050406a81Reviewed-on:https://chromium-review.googlesource.com/c/chromium/src/+/4434155Commit-Queue: Joey Arhar <jarhar@chromium.org>Commit-Queue: Xiaocheng Hu <xiaochengh@chromium.org>Reviewed-by: Joey Arhar <jarhar@chromium.org>Code-Coverage: Findit <findit-for-me@appspot.gserviceaccount.com>Auto-Submit: Xiaocheng Hu <xiaochengh@chromium.org>Cr-Commit-Position: refs/heads/main@{#1131479}
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this pull requestApr 17, 2023
This patch also adds WPTs for the anchor attribute (without popovers)to support the HTML PRwhatwg/html#9144Fixed: 1432016Change-Id: I3e80326268008e6beaf74389bb32c01050406a81Reviewed-on:https://chromium-review.googlesource.com/c/chromium/src/+/4434155Commit-Queue: Joey Arhar <jarhar@chromium.org>Commit-Queue: Xiaocheng Hu <xiaochengh@chromium.org>Reviewed-by: Joey Arhar <jarhar@chromium.org>Code-Coverage: Findit <findit-for-me@appspot.gserviceaccount.com>Auto-Submit: Xiaocheng Hu <xiaochengh@chromium.org>Cr-Commit-Position: refs/heads/main@{#1131479}
moz-v2v-gh pushed a commit to mozilla/gecko-dev that referenced this pull requestApr 19, 2023
…r attribute changes, a=testonlyAutomatic update from web-platform-tests[anchor-position] Update layout on anchor attribute changesThis patch also adds WPTs for the anchor attribute (without popovers)to support the HTML PRwhatwg/html#9144Fixed: 1432016Change-Id: I3e80326268008e6beaf74389bb32c01050406a81Reviewed-on:https://chromium-review.googlesource.com/c/chromium/src/+/4434155Commit-Queue: Joey Arhar <jarhar@chromium.org>Commit-Queue: Xiaocheng Hu <xiaochengh@chromium.org>Reviewed-by: Joey Arhar <jarhar@chromium.org>Code-Coverage: Findit <findit-for-me@appspot.gserviceaccount.com>Auto-Submit: Xiaocheng Hu <xiaochengh@chromium.org>Cr-Commit-Position: refs/heads/main@{#1131479}--wpt-commits: db5d9506cb37895b200037877628911afd3fac14wpt-pr: 39576
@annevk
Copy link
Member

Before looking at this I'd like to see topic: popoverThe popover attribute and friends shrink a whole lot first.

@jpzwarte
Copy link

jpzwarte commentedMay 19, 2023•
edited
Loading

I've moved my previous comment to#9311.

@cwilso
Copy link

@annevk I'm not sure I understand why this work is blocking on popover. Although popover is one place anchor would be useful, of course, it's not the only scenario - and it seems like popover's needs are addressed here. What is the scope of your concern for what needs to be investigated before anchor work can proceed?

Shanukuttoth reacted with thumbs up emoji

@nt1m
Copy link
Member

nt1m commentedJun 6, 2023•
edited
Loading

@josepharhar@tabatkins My initial thought looking at this is whether we can leverage presentation hints in some way instead of an "implicit anchor element", while still making it work conveniently for developers.

The idea behind this seems fine to me though.

Shanukuttoth reacted with thumbs up emoji

@annevk
Copy link
Member

@cwilso my concern is that popover landed in the standard with lots of issues that need to be addressed and it's been taking quite a long time for them to be addressed. That makes me uncomfortable about new features.

Shanukuttoth and myakura reacted with thumbs up emoji

@tabatkins
Copy link
Contributor

whether we can leverage presentation hints in some way instead of an "implicit anchor element", while still making it work conveniently for developers.

I'm not sure how that would be possible. Without an implicit anchor element, you need anamed anchor element, which means that, assuming we could craft an appropriate selector (not certain that's true, haven't thought about it enough) we'd have to reserve a name just for this use-case. And an element can only have one anchor name, so it would conflict with authors using an anchor name on the element for other purposes. (Even if we change to allow multiple anchor names, which there's an open issue about, we'd still conflict since CSS has never gained a way to add to a list.) So I don't think it's possible to do this, no.

Skipping past the feasibility, tho, can I ask why you want to do this? If there's a particular reason you want to lean on presentational hints instead, I'd like to know in case it impacts other things architecturally.

Shanukuttoth reacted with thumbs up emoji

@josepharhar
Copy link
ContributorAuthor

We want to ship this soon in chrome along with CSS anchor positioning so they can be used together.
I will continue to work on the remaining popover issues, but any feedback on this attribute in the meantime would be greatly appreciated so we have time to make changes if needed.

domenic added a commit that referenced this pull requestJul 4, 2023
Fix the backlinks to the attribute definitions, which has the effect of causing the attribute definitions to show up in the input and button element definitions. (The newlines here are, unfortunately, important.)Also make popovertarget use the same "ID*" value space as other ID-accepting elements, as noted in#9144 (comment).
@davatron5000
Copy link

Looped in by@chrisdholt, I was working on an anchored tooltip this week and have a reduced example.

Given the DOM structure ....

<buttonid="anchor"popovertarget="tooltip">Text</button><tool-tipid="tooltip"popover>Content</tool-tip>

The following CSS works in Light DOM...

<style>#anchor {anchor-name:--my-name; }#tool-tip {position-anchor:--my-name;bottom:anchor(--my-name, top);   }</style>

But moving that into the Shadow DOM doesn't work.

<style>#anchor {anchor-name:--my-name; }</style><buttonid="anchor"popovertarget="tooltip">Text</button><tool-tipid="tooltip"popover><templateshadowrootmode="open"><style>:host {         position-anchor:--my-name;         bottom: anchor(--my-name,top);       }</style><slot></slot></template>  Content</tool-tip>

The "CSS ref" to--my-name is lost when traversing the shadow boundary. That meansanchor(--my-name ...), etc won't work in the Shadow styles either. And (just in case someone is curious) assigning--anchor: --my-name to a CSS Custom Property doesn't work either.

Ananchor attribute would be awesome, but ideally accessible/referenceable from the ShadowRoot:host as well as shadow children.

chrisdholt, marchbox, jpzwarte, michaelwarren1106, trusktr, and beratbayram reacted with thumbs up emoji

@mfreed7
Copy link
Contributor

The following CSS works in Light DOM...
But moving that into the Shadow DOM doesn't work.

The "CSS ref" to--my-name is lost when traversing the shadow boundary. That meansanchor(--my-name ...), etc won't work in the Shadow styles either. And (just in case someone is curious) assigning--anchor: --my-name to a CSS Custom Property doesn't work either.

Ahh - thanks for the clarification. Note thatfinding an anchor says:

...
el’sanchor name and anchor spec are both associated with the sametreeroot.

and also this:

Note: Ananchor-name defined by styles in oneshadow tree won’t be seen byanchor functions in styles in a different shadow tree, preserving encapsulation. However, elements in different shadow trees can still anchor to each other, so long as both the anchor-name and anchor function come from styles in the same tree, such as by using::part() to style an element inside a shadow. (Implicit anchor elements also aren’t intrinsically limited to a single tree, but the details of that will depend on the API assigning them.)

So in your example, you'd have to position the tooltip using your first ("working") CSS, where you are anchoring in the light DOM, and not the one where you setposition-anchor on:host from inside the shadow root, because in that case you're trying to cross shadow root bounds with the anchor reference.

Also note that last sentence, which alludes strongly tothis issue about theanchor attribute.

mfreed7 added a commit to mfreed7/html that referenced this pull requestOct 28, 2024
This includes two related changes: 1. The `showPopover()` and `togglePopover()` methods now include an    options bag that allows setting the popover invoker. 2. Popover invokers (declaratively or imperatively set) now create    an implicit anchor reference for that popover.This new behavior was resolved in the [WHATWG/CSSWG/OpenUI joint taskforce meeting on June 26, 2024](whatwg#9144 (comment)).Closeswhatwg#10442Closeswhatwg#10675
domenic pushed a commit to mfreed7/html that referenced this pull requestNov 15, 2024
This includes two related changes: 1. The `showPopover()` and `togglePopover()` methods now include an    options bag that allows setting the popover invoker. 2. Popover invokers (declaratively or imperatively set) now create    an implicit anchor reference for that popover.This new behavior was resolved in the [WHATWG/CSSWG/OpenUI joint taskforce meeting on June 26, 2024](whatwg#9144 (comment)).Closeswhatwg#10442Closeswhatwg#10675
domenic pushed a commit that referenced this pull requestNov 15, 2024
This includes two related changes:1. The showPopover() and togglePopover() methods now include an options bag that allows setting the popover source.2. Popover sources (declaratively or imperatively set) now create an implicit anchor reference for that popover.See discussion in#9144 (comment).Closes#10442.Closes#10675.
@amn
Copy link

amn commentedJan 4, 2025•
edited
Loading

I agree that in its currently proposed form, theanchor attribute makes for a clear layout-vs-presentation problem. Ideally I'd see HTML not mix back in what comes across as a only thinly disguised presentation-level kludge, after things like<font> and<center> were banished long ago.

For what it is worth, and I am sure this has been mentioned already, I for one wouldn't necessarily object to a means of associating popover elements with some other element(s), since semantics of a popover may in the very least optionally permit it to relate to some element. For instance, form elements present what is essentially a popover element, to communicate e.g. validation errors, and said popover element would then naturally be related to the form control being validated.

In fact, one could make the case that the association of a popover element with some other element is implicit, even if one is not specified, in which case the popover is associated with the entire document body.

Which leads me to preliminarily conclude that there could be made a case forsome HTML attribute to associate a popover element with another element. If the element related to a popover element, were to be removed [from the document], for instance, then it would by default remove (or at least hide) the popover element, such is the nature of the association proposed -- regardless of whether the popover element is in the other element's tree.

For instance, there may be a popover element related to an entiretable, but cannot be placed directly in thetable since the latter doesn't admit elements of arbitrary type (node name), so the removal described above cannot rely on the popover element being in its "anchor" element's tree.

Conclusively,anchormay or may not be a good name for an attribute relating a popover element to its "anchor", but indeed it's a slippery slope -- is there no other name that can better reflect the semantics of the relationship governed by HTML, not taking CSS into account (ideally)?

lozy219 pushed a commit to lozy219/html that referenced this pull requestMar 10, 2025
This includes two related changes:1. The showPopover() and togglePopover() methods now include an options bag that allows setting the popover source.2. Popover sources (declaratively or imperatively set) now create an implicit anchor reference for that popover.See discussion inwhatwg#9144 (comment).Closeswhatwg#10442.Closeswhatwg#10675.
@woody-li

This comment was marked as off-topic.

@Jxck
Copy link

Does creating custom ident dynamically viaident() in CSS cover this proposal ?
w3c/csswg-drafts#9141

@tabatkins
Copy link
Contributor

No, usingident() still means you need to explicitly link the two elements with a name. At best, it lets you write your CSS more generically, and push the name into the HTML.

aarongable pushed a commit to chromium/chromium that referenced this pull requestJun 16, 2025
Make test using it tentative, and remove the use where not needed.Seeweb-platform-tests/wpt#53140[1]whatwg/html#9144Change-Id: I78d574cfe33c84031d067c308bfb364e56ba20e5Reviewed-on:https://chromium-review.googlesource.com/c/chromium/src/+/6646507Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>Commit-Queue: Rune Lillesveen <futhark@chromium.org>Auto-Submit: Rune Lillesveen <futhark@chromium.org>Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>Cr-Commit-Position: refs/heads/main@{#1474181}
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this pull requestJun 16, 2025
Make test using it tentative, and remove the use where not needed.See#53140[1]whatwg/html#9144Change-Id: I78d574cfe33c84031d067c308bfb364e56ba20e5Reviewed-on:https://chromium-review.googlesource.com/c/chromium/src/+/6646507Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>Commit-Queue: Rune Lillesveen <futhark@chromium.org>Auto-Submit: Rune Lillesveen <futhark@chromium.org>Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>Cr-Commit-Position: refs/heads/main@{#1474181}
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this pull requestJun 16, 2025
Make test using it tentative, and remove the use where not needed.See#53140[1]whatwg/html#9144Change-Id: I78d574cfe33c84031d067c308bfb364e56ba20e5Reviewed-on:https://chromium-review.googlesource.com/c/chromium/src/+/6646507Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>Commit-Queue: Rune Lillesveen <futhark@chromium.org>Auto-Submit: Rune Lillesveen <futhark@chromium.org>Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>Cr-Commit-Position: refs/heads/main@{#1474181}
lando-prod-mozillabot pushed a commit to mozilla-firefox/firefox that referenced this pull requestJun 23, 2025
…], a=testonlyAutomatic update from web-platform-testsHTML anchor attribute is not in a spec[1]Make test using it tentative, and remove the use where not needed.Seeweb-platform-tests/wpt#53140[1]whatwg/html#9144Change-Id: I78d574cfe33c84031d067c308bfb364e56ba20e5Reviewed-on:https://chromium-review.googlesource.com/c/chromium/src/+/6646507Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>Commit-Queue: Rune Lillesveen <futhark@chromium.org>Auto-Submit: Rune Lillesveen <futhark@chromium.org>Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>Cr-Commit-Position: refs/heads/main@{#1474181}--wpt-commits: 5a46d0ec81d0a67de1f697d405565abec5f89227wpt-pr: 53169
moz-v2v-gh pushed a commit to mozilla/gecko-dev that referenced this pull requestJun 23, 2025
…], a=testonlyAutomatic update from web-platform-testsHTML anchor attribute is not in a spec[1]Make test using it tentative, and remove the use where not needed.Seeweb-platform-tests/wpt#53140[1]whatwg/html#9144Change-Id: I78d574cfe33c84031d067c308bfb364e56ba20e5Reviewed-on:https://chromium-review.googlesource.com/c/chromium/src/+/6646507Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>Commit-Queue: Rune Lillesveen <futhark@chromium.org>Auto-Submit: Rune Lillesveen <futhark@chromium.org>Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>Cr-Commit-Position: refs/heads/main@{#1474181}--wpt-commits: 5a46d0ec81d0a67de1f697d405565abec5f89227wpt-pr: 53169
i3roly pushed a commit to i3roly/firefox-dynasty that referenced this pull requestJun 24, 2025
…], a=testonlyAutomatic update from web-platform-testsHTML anchor attribute is not in a spec[1]Make test using it tentative, and remove the use where not needed.Seeweb-platform-tests/wpt#53140[1]whatwg/html#9144Change-Id: I78d574cfe33c84031d067c308bfb364e56ba20e5Reviewed-on:https://chromium-review.googlesource.com/c/chromium/src/+/6646507Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>Commit-Queue: Rune Lillesveen <futhark@chromium.org>Auto-Submit: Rune Lillesveen <futhark@chromium.org>Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>Cr-Commit-Position: refs/heads/main@{#1474181}--wpt-commits: 5a46d0ec81d0a67de1f697d405565abec5f89227wpt-pr: 53169
gecko-dev-updater pushed a commit to marco-c/gecko-dev-wordified-and-comments-removed that referenced this pull requestJun 24, 2025
…], a=testonlyAutomatic update from web-platform-testsHTML anchor attribute is not in a spec[1]Make test using it tentative, and remove the use where not needed.Seeweb-platform-tests/wpt#53140[1]whatwg/html#9144Change-Id: I78d574cfe33c84031d067c308bfb364e56ba20e5Reviewed-on:https://chromium-review.googlesource.com/c/chromium/src/+/6646507Reviewed-by: Anders Hartvoll Ruud <andruudchromium.org>Commit-Queue: Rune Lillesveen <futharkchromium.org>Auto-Submit: Rune Lillesveen <futharkchromium.org>Commit-Queue: Anders Hartvoll Ruud <andruudchromium.org>Cr-Commit-Position: refs/heads/main{#1474181}--wpt-commits: 5a46d0ec81d0a67de1f697d405565abec5f89227wpt-pr: 53169UltraBlame original commit: 7fd904d7332d63f49232d48cf85ac3c988c1354e
gecko-dev-updater pushed a commit to marco-c/gecko-dev-wordified that referenced this pull requestJun 24, 2025
…], a=testonlyAutomatic update from web-platform-testsHTML anchor attribute is not in a spec[1]Make test using it tentative, and remove the use where not needed.Seeweb-platform-tests/wpt#53140[1]whatwg/html#9144Change-Id: I78d574cfe33c84031d067c308bfb364e56ba20e5Reviewed-on:https://chromium-review.googlesource.com/c/chromium/src/+/6646507Reviewed-by: Anders Hartvoll Ruud <andruudchromium.org>Commit-Queue: Rune Lillesveen <futharkchromium.org>Auto-Submit: Rune Lillesveen <futharkchromium.org>Commit-Queue: Anders Hartvoll Ruud <andruudchromium.org>Cr-Commit-Position: refs/heads/main{#1474181}--wpt-commits: 5a46d0ec81d0a67de1f697d405565abec5f89227wpt-pr: 53169UltraBlame original commit: 7fd904d7332d63f49232d48cf85ac3c988c1354e
gecko-dev-updater pushed a commit to marco-c/gecko-dev-comments-removed that referenced this pull requestJun 24, 2025
…], a=testonlyAutomatic update from web-platform-testsHTML anchor attribute is not in a spec[1]Make test using it tentative, and remove the use where not needed.Seeweb-platform-tests/wpt#53140[1]whatwg/html#9144Change-Id: I78d574cfe33c84031d067c308bfb364e56ba20e5Reviewed-on:https://chromium-review.googlesource.com/c/chromium/src/+/6646507Reviewed-by: Anders Hartvoll Ruud <andruudchromium.org>Commit-Queue: Rune Lillesveen <futharkchromium.org>Auto-Submit: Rune Lillesveen <futharkchromium.org>Commit-Queue: Anders Hartvoll Ruud <andruudchromium.org>Cr-Commit-Position: refs/heads/main{#1474181}--wpt-commits: 5a46d0ec81d0a67de1f697d405565abec5f89227wpt-pr: 53169UltraBlame original commit: 7fd904d7332d63f49232d48cf85ac3c988c1354e
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Reviewers

@zcorpanzcorpanzcorpan left review comments

@myakuramyakuramyakura left review comments

@foolipfoolipfoolip left review comments

@domenicdomenicdomenic left review comments

@tabatkinstabatkinstabatkins left review comments

@emilioemilioemilio left review comments

@annevkannevkannevk left review comments

@xiaochenghxiaochenghxiaochengh left review comments

@mfreed7mfreed7mfreed7 left review comments

@lukewarlowlukewarlowlukewarlow left review comments

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

23 participants
@josepharhar@annevk@jpzwarte@cwilso@nt1m@tabatkins@mfreed7@foolip@lukewarlow@emilio@fantasai@Howard13Kam@Jxck@aleventhal@chrisdholt@davatron5000@amn@woody-li@zcorpan@myakura@domenic@xiaochengh@past
[8]ページ先頭
©2009-2025 Movatter.jp