Fix: Support HTML <selectedcontent> element
#1101
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: 1ee2a88 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
jp-knj
commented
Aug 23, 2025
| "link": true, | ||
| "meta": true, | ||
| "param": true, | ||
| "selectedcontent": true, |
There was a problem hiding this comment.
just add selectedcontent, then apply formatting
|
Thank you @jp-knj The new tests that you added should also generate some snapshots. Can you update them? https://github.com/withastro/compiler/blob/main/CONTRIBUTING.md#snapshot-testing |
- handle selectedcontent as void element only with /> syntax - support button closing tags in select context - prevent incorrect nesting of option elements
jp-knj
commented
Aug 31, 2025
Comment on lines
+1447
to
+1452
| // Special handling for selectedcontent end tag - just ignore it | ||
| // since it's treated as a void element | ||
| if p.tok.Data == "selectedcontent" { | ||
| return true | ||
| } | ||
|
|
There was a problem hiding this comment.
Why Ignore End Tags
The Problem Flow:
When HTML contains <selectedcontent></selectedcontent>:
- Tokenizer generates these tokens:
<selectedcontent>→ StartTagToken</selectedcontent>→ EndTagToken
- Parser processing:
- Treats as a void element (can't have children)
- Adds it to DOM, then immediately pops it from the stack
- At this point, selectedcontent is no longer on the stack
- When arrives:
- There's no matching opening tag on the stack
- If we don't ignore it: Parser gets confused and misplaces subsequent elements
What Actually Happened:
<!-- Input -->
<select><button><selectedcontent></selectedcontent></button><option>A</option></select>
<!-- Wrong output (without ignoring the end tag) -->
<select><button><selectedcontent><option>A</option></button></select>
<!-- ↑ option becomes a child of selectedcontent (WRONG!) -->
jp-knj
commented
Aug 31, 2025
Comment on lines
+2337
to
+2348
| // Handle closing tags for elements that are allowed in customizable select | ||
| // (like button for the new HTML select element) | ||
| if p.tok.Data == "button" { | ||
| // Close the button if it's open | ||
| for i := len(p.oe) - 1; i >= 0; i-- { | ||
| if p.oe[i].Data == "button" { | ||
| p.oe = p.oe[:i] | ||
| break | ||
| } | ||
| } | ||
| return true | ||
| } |
There was a problem hiding this comment.
Why support </button> tags in select context
- In standard HTML, a
<button>is not allowed inside a<select>. - The Customizable Select feature, however, allow interactive content (including
<button>) inside<select>.
Supporting</button>here is forward-compatible with that model.
before
EndTag </button>
Stack before: <html> <select> <button>
Stack after: <html> <select> <button> ← button NOT closed!
StartTag <option>
Stack after: <html> <select> <button> <option> ← option becomes child of button (WRONG!)
After
EndTag </button>
Stack before: <html> <select> <button>
Stack after: <html> <select> ← button correctly closed
StartTag <option>
Stack after: <html> <select> <option> ← option is direct child of select (CORRECT!)
|
updated |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #1093
Background
The
<selectedcontent>element is used inside customizable<select>elements to display the currently selected option within a custom button. It's part of the new web standard for styleable select elements that's been years in the making.Problem
Without this fix, the Astro compiler treats as a regular container element, causing it to incorrectly consume all following elements until the parent's closing tag. This breaks the structure of customizable select elements.
Before: Options incorrectly nested inside selectedcontent
After: Correct structure with selectedcontent as void element
Changes
<selectedcontent>element:selectedcontentas self-closing when it has the/>syntax<selectedcontent></selectedcontent>selectedcontentas a void element</selectedcontent>end tags, Add support for closing</button>tags within select contextselectedcontentin the voidElements mapTesting
<selectedcontent></selectedcontent>and<selectedcontent />syntaxReferences