fix(compiler-dom): update HTML nesting validation for Chrome 134+ spec #13720
Conversation
Add tests for new HTML5 specifications that allow: - button as child of select - inline elements (span, b, i, strong, em) as children of option ref vuejs#13608
Allow new HTML5 nesting patterns: - button as child of select - inline elements (span, b, i, strong, em) as children of option This aligns with the latest HTML specifications supported in Chrome 134+ while maintaining validation for invalid block-level elements. close vuejs#13608
WalkthroughThe HTML nesting validation logic and its associated tests were updated to reflect recent HTML5 specification changes. Changes
Sequence Diagram(s)sequenceDiagram
participant TestSuite
participant isValidHTMLNesting
participant htmlNestingRules
TestSuite->>isValidHTMLNesting: Validate <button> in <select>
isValidHTMLNesting->>htmlNestingRules: Check allowed children for <select>
htmlNestingRules-->>isValidHTMLNesting: Return true for <button>
isValidHTMLNesting-->>TestSuite: No warning
TestSuite->>isValidHTMLNesting: Validate <b>, <span> in <option>
isValidHTMLNesting->>htmlNestingRules: Check allowed children for <option>
htmlNestingRules-->>isValidHTMLNesting: Return true for inline elements
isValidHTMLNesting-->>TestSuite: No warning
TestSuite->>isValidHTMLNesting: Validate <div> in <option>
isValidHTMLNesting->>htmlNestingRules: Check allowed children for <option>
htmlNestingRules-->>isValidHTMLNesting: Return false for <div>
isValidHTMLNesting-->>TestSuite: Emit warning
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Assessment against linked issues
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/compiler-dom/__tests__/transforms/validateHtmlNesting.spec.ts (1)
40-54: Consider expanding integration test coverage for styled option content.While these tests correctly verify that inline elements work within
<option>, consider adding tests for other allowed inline elements (<i>,<strong>,<em>) and negative cases (block elements that should still warn) to match the comprehensive coverage in the unit tests below.Add these additional integration tests for better coverage:
it('should not warn with option > b', () => { let err: CompilerError | undefined compile(`<select><option><b>Bold text</b></option></select>`, { onWarn: e => (err = e), }) expect(err).toBeUndefined() }) + it('should not warn with option > i', () => { + let err: CompilerError | undefined + compile(`<select><option><i>Italic text</i></option></select>`, { + onWarn: e => (err = e), + }) + expect(err).toBeUndefined() + }) + + it('should warn with option > div', () => { + let err: CompilerError | undefined + compile(`<select><option><div>Block content</div></option></select>`, { + onWarn: e => (err = e), + }) + expect(err).toBeDefined() + expect(err!.message).toMatch(`<div> cannot be child of <option>`) + })
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/compiler-dom/__tests__/transforms/validateHtmlNesting.spec.ts(2 hunks)packages/compiler-dom/src/htmlNesting.ts(2 hunks)
🔇 Additional comments (5)
packages/compiler-dom/src/htmlNesting.ts (2)
66-66: LGTM! Correctly implements Chrome 134+ spec for customizable dropdowns.Adding
'button'as a valid child of<select>aligns perfectly with the Chrome 134+ HTML5 specification update that enables customizable dropdown functionality.
110-110: Well-designed approach to enable styled option content.The implementation correctly allows inline styling elements within
<option>while maintaining restrictions on block-level elements ('div','p'). This targeted approach enables the Chrome 134+ HTML5 spec features while preserving semantic integrity.packages/compiler-dom/__tests__/transforms/validateHtmlNesting.spec.ts (3)
32-38: LGTM! Good integration test for Chrome 134+ select enhancement.This test correctly verifies that
<button>inside<select>no longer triggers validation warnings, aligning with the Chrome 134+ specification update.
176-184: Excellent comprehensive unit test coverage for select element.This test thoroughly validates both the new functionality (button as child) and maintains coverage for existing valid children. The test structure and assertions are well-designed.
186-197: Excellent comprehensive unit test coverage for option element.This test provides thorough coverage of the Chrome 134+ specification changes, testing both positive cases (inline styling elements) and negative cases (block-level elements that remain invalid). The implementation correctly validates the new HTML5 nesting rules.
| @@ -63,7 +63,7 @@ const onlyValidChildren: Record<string, Set<string>> = { | |||
| 'template', | |||
| ]), | |||
| optgroup: new Set(['option']), | |||
| select: new Set(['optgroup', 'option', 'hr']), | |||
| select: new Set(['optgroup', 'option', 'hr', 'button']), | |||
| @@ -63,7 +63,7 @@ const onlyValidChildren: Record<string, Set<string>> = { | |||
| 'template', | |||
| ]), | |||
| optgroup: new Set(['option']), | |||
There was a problem hiding this comment.
Per spec, div is also allowed.
| @@ -108,6 +107,7 @@ const onlyValidParents: Record<string, Set<string>> = { | |||
|
|
|||
| /** maps element to set of elements that can not be it's children, others can */ | |||
| const knownInvalidChildren: Record<string, Set<string>> = { | |||
| option: new Set(['div', 'p']), | |||
There was a problem hiding this comment.
Per spec, option can have div inside.
Close #13608
Summary
This PR updates Vue's HTML nesting validation to align with the Chrome 134+ HTML5 specification changes that allow new elements as children of
<select>and<option>.Changes Made:
<button>as a child of<select>- Chrome 134+ now supports buttons inside select elements for customizable dropdowns<option>- Elements like<span>,<b>,<i>, etc. can now be used to style option contentImplementation Details:
'button'to the list of valid children forselectelements inhtmlNesting.ts'option'from theemptySetto allow it to have children'option'toknownInvalidChildrenwith only block-level elements ('div','p') restricted, allowing inline elements by defaultTesting:
Compatibility:
Test Plan
The following tests were added to verify the fix:
Additionally, the
isValidHTMLNestingunit tests were updated to cover these cases comprehensively.Related Links
<SELECT>and<OPTION>, anddata-allow-mismatchdoes not remove warning #13608Summary by CodeRabbit
<button>elements are now allowed inside<select>, and inline elements like<span>,<b>,<i>,<strong>, and<em>are now valid children of<option>.<div>and<p>from being nested inside<option>.