fix(compiler-dom): update HTML nesting validation for Chrome 134+ spec

packages/compiler-dom/__tests__/transforms/validateHtmlNesting.spec.ts

@@ -27,6 +27,31 @@ describe('validate html nesting', () => {
     })
     expect(err).toBeUndefined()
   })
+
+  // #13608 - Chrome 134+ HTML5 spec updates
+  it('should not warn with select > button', () => {
+    let err: CompilerError | undefined
+    compile(`<select><button>Click me</button></select>`, {
+      onWarn: e => (err = e),
+    })
+    expect(err).toBeUndefined()
+  })
+
+  it('should not warn with option > span', () => {
+    let err: CompilerError | undefined
+    compile(`<select><option><span>Styled text</span></option></select>`, {
+      onWarn: e => (err = e),
+    })
+    expect(err).toBeUndefined()
+  })
+
+  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()
+  })
 })
 
 /**
@@ -148,6 +173,29 @@ describe('isValidHTMLNesting', () => {
     expect(isValidHTMLNesting('h1', 'div')).toBe(true)
   })
 
+  test('select - Chrome 134+ allows button as child', () => {
+    // These should be valid according to new HTML5 spec (Chrome 134+)
+    expect(isValidHTMLNesting('select', 'button')).toBe(true)
+
+    // Traditional valid children should still work
+    expect(isValidHTMLNesting('select', 'option')).toBe(true)
+    expect(isValidHTMLNesting('select', 'optgroup')).toBe(true)
+    expect(isValidHTMLNesting('select', 'hr')).toBe(true)
+  })
+
+  test('option - Chrome 134+ allows styled content', () => {
+    // These should be valid according to new HTML5 spec (Chrome 134+)
+    expect(isValidHTMLNesting('option', 'span')).toBe(true)
+    expect(isValidHTMLNesting('option', 'b')).toBe(true)
+    expect(isValidHTMLNesting('option', 'i')).toBe(true)
+    expect(isValidHTMLNesting('option', 'strong')).toBe(true)
+    expect(isValidHTMLNesting('option', 'em')).toBe(true)
+
+    // Block-level elements might still be invalid
+    expect(isValidHTMLNesting('option', 'div')).toBe(false)
+    expect(isValidHTMLNesting('option', 'p')).toBe(false)
+  })
+
   describe('SVG', () => {
     test('svg', () => {
       // invalid non-svg tags as children

packages/compiler-dom/src/htmlNesting.ts

@@ -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']),
   // table
   table: new Set(['caption', 'colgroup', 'tbody', 'tfoot', 'thead']),
   tr: new Set(['td', 'th']),
@@ -74,7 +74,6 @@ const onlyValidChildren: Record<string, Set<string>> = {
   // these elements can not have any children elements
   script: emptySet,
   iframe: emptySet,
-  option: emptySet,
   textarea: emptySet,
   style: emptySet,
   title: emptySet,
@@ -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']),
   p: new Set([
     'address',
     'article',