diff --git a/packages/compiler-dom/__tests__/transforms/validateHtmlNesting.spec.ts b/packages/compiler-dom/__tests__/transforms/validateHtmlNesting.spec.ts
index 46d69846bae..86b8e7d3472 100644
--- a/packages/compiler-dom/__tests__/transforms/validateHtmlNesting.spec.ts
+++ b/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(``, {
+ onWarn: e => (err = e),
+ })
+ expect(err).toBeUndefined()
+ })
+
+ it('should not warn with option > span', () => {
+ let err: CompilerError | undefined
+ compile(``, {
+ onWarn: e => (err = e),
+ })
+ expect(err).toBeUndefined()
+ })
+
+ it('should not warn with option > b', () => {
+ let err: CompilerError | undefined
+ compile(``, {
+ 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
diff --git a/packages/compiler-dom/src/htmlNesting.ts b/packages/compiler-dom/src/htmlNesting.ts
index 5f924880bd0..09861eb68b3 100644
--- a/packages/compiler-dom/src/htmlNesting.ts
+++ b/packages/compiler-dom/src/htmlNesting.ts
@@ -63,7 +63,7 @@ const onlyValidChildren: Record> = {
'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> = {
// 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> = {
/** maps element to set of elements that can not be it's children, others can */
const knownInvalidChildren: Record> = {
+ option: new Set(['div', 'p']),
p: new Set([
'address',
'article',