From dbec3c8f8b9897193fd0f3d32cf3f060af20dbc2 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Sun, 25 Feb 2024 23:04:26 +0800
Subject: [PATCH] fix(parser): should not treat uppercase components as special
 tags

close #10395
---
 packages/compiler-core/src/tokenizer.ts       | 15 ++++++---------
 packages/compiler-dom/__tests__/parse.spec.ts | 16 +++++++++++++++-
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/packages/compiler-core/src/tokenizer.ts b/packages/compiler-core/src/tokenizer.ts
index c63ec6bfbb1..561a84b5f12 100644
--- a/packages/compiler-core/src/tokenizer.ts
+++ b/packages/compiler-core/src/tokenizer.ts
@@ -553,12 +553,11 @@ export default class Tokenizer {
         // HTML mode
         // - <script>, <style> RAWTEXT
         // - <title>, <textarea> RCDATA
-        const lower = c | 0x20
-        if (lower === 116 /* t */) {
+        if (c === 116 /* t */) {
           this.state = State.BeforeSpecialT
         } else {
           this.state =
-            lower === 115 /* s */ ? State.BeforeSpecialS : State.InTagName
+            c === 115 /* s */ ? State.BeforeSpecialS : State.InTagName
         }
       } else {
         this.state = State.InTagName
@@ -862,10 +861,9 @@ export default class Tokenizer {
     }
   }
   private stateBeforeSpecialS(c: number): void {
-    const lower = c | 0x20
-    if (lower === Sequences.ScriptEnd[3]) {
+    if (c === Sequences.ScriptEnd[3]) {
       this.startSpecial(Sequences.ScriptEnd, 4)
-    } else if (lower === Sequences.StyleEnd[3]) {
+    } else if (c === Sequences.StyleEnd[3]) {
       this.startSpecial(Sequences.StyleEnd, 4)
     } else {
       this.state = State.InTagName
@@ -873,10 +871,9 @@ export default class Tokenizer {
     }
   }
   private stateBeforeSpecialT(c: number): void {
-    const lower = c | 0x20
-    if (lower === Sequences.TitleEnd[3]) {
+    if (c === Sequences.TitleEnd[3]) {
       this.startSpecial(Sequences.TitleEnd, 4)
-    } else if (lower === Sequences.TextareaEnd[3]) {
+    } else if (c === Sequences.TextareaEnd[3]) {
       this.startSpecial(Sequences.TextareaEnd, 4)
     } else {
       this.state = State.InTagName
diff --git a/packages/compiler-dom/__tests__/parse.spec.ts b/packages/compiler-dom/__tests__/parse.spec.ts
index 80a08e76af6..c3cfd3249d3 100644
--- a/packages/compiler-dom/__tests__/parse.spec.ts
+++ b/packages/compiler-dom/__tests__/parse.spec.ts
@@ -20,7 +20,7 @@ describe('DOM parser', () => {
       )
       const element = ast.children[0] as ElementNode
       const text = element.children[0] as TextNode
-
+      expect(element.children.length).toBe(1)
       expect(text).toStrictEqual({
         type: NodeTypes.TEXT,
         content: 'some<div>text</div>and<!--comment-->',
@@ -32,6 +32,20 @@ describe('DOM parser', () => {
       })
     })
 
+    test('should not treat Uppercase component as special tag', () => {
+      const ast = parse(
+        '<TextArea>some<div>text</div>and<!--comment--></TextArea>',
+        parserOptions,
+      )
+      const element = ast.children[0] as ElementNode
+      expect(element.children.map(n => n.type)).toMatchObject([
+        NodeTypes.TEXT,
+        NodeTypes.ELEMENT,
+        NodeTypes.TEXT,
+        NodeTypes.COMMENT,
+      ])
+    })
+
     test('textarea handles entities', () => {
       const ast = parse('<textarea>&amp;</textarea>', parserOptions)
       const element = ast.children[0] as ElementNode