From 9eefb07d894ec8e491306b2bc4090a4bfc78e5b5 Mon Sep 17 00:00:00 2001
From: Alan Agius <17563226+alan-agius4@users.noreply.github.com>
Date: Thu, 28 May 2026 08:39:55 +0000
Subject: [PATCH] fix(compiler): prevent namespaced SVG <style> elements from
 being stripped

Updates the template preparser to exclude namespaced SVG style tags (':svg:style') from the style elements set.

Previously, ':svg:style' elements were incorrectly classified as PreparsedElementType.STYLE, which caused them to be completely stripped from the final template DOM tree during the Render3 template transform and pushed into standard component stylesheets. By limiting the style element parsing to standard 'style' tags, namespaced SVG style tags remain safely in the template AST as normal DOM elements, preserving local SVG styling.

Closes #68977
---
 .../compiler/src/template_parser/template_preparser.ts |  4 ++--
 .../test/render3/r3_template_transform_spec.ts         | 10 +++++++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/compiler/src/template_parser/template_preparser.ts b/packages/compiler/src/template_parser/template_preparser.ts
index 2c5889cae6c0..fb994afaa6e8 100644
--- a/packages/compiler/src/template_parser/template_preparser.ts
+++ b/packages/compiler/src/template_parser/template_preparser.ts
@@ -14,7 +14,7 @@ const LINK_ELEMENT = 'link';
 const LINK_STYLE_REL_ATTR = 'rel';
 const LINK_STYLE_HREF_ATTR = 'href';
 const LINK_STYLE_REL_VALUE = 'stylesheet';
-const STYLE_ELEMENTS: ReadonlySet<string> = new Set([':svg:style', 'style']);
+const STYLE_ELEMENT = 'style';
 const SCRIPT_ELEMENTS: ReadonlySet<string> = new Set([':svg:script', 'script']);
 const NG_NON_BINDABLE_ATTR = 'ngNonBindable';
 const NG_PROJECT_AS = 'ngProjectAs';
@@ -50,7 +50,7 @@ export function preparseElement(ast: html.Element): PreparsedElement {
   let type = PreparsedElementType.OTHER;
   if (isNgContent(nodeName)) {
     type = PreparsedElementType.NG_CONTENT;
-  } else if (STYLE_ELEMENTS.has(nodeName)) {
+  } else if (STYLE_ELEMENT === nodeName) {
     type = PreparsedElementType.STYLE;
   } else if (SCRIPT_ELEMENTS.has(nodeName)) {
     type = PreparsedElementType.SCRIPT;
diff --git a/packages/compiler/test/render3/r3_template_transform_spec.ts b/packages/compiler/test/render3/r3_template_transform_spec.ts
index 7ca0668218a2..154f561ca458 100644
--- a/packages/compiler/test/render3/r3_template_transform_spec.ts
+++ b/packages/compiler/test/render3/r3_template_transform_spec.ts
@@ -895,7 +895,7 @@ describe('R3 template transform', () => {
     });
   });
 
-  describe('Ignored elements', () => {
+  describe('<script> and <style> elements', () => {
     it('should ignore <script> elements', () => {
       expectFromHtml('<script></script>a').toEqual([['Text', 'a']]);
     });
@@ -903,6 +903,14 @@ describe('R3 template transform', () => {
     it('should ignore <style> elements', () => {
       expectFromHtml('<style></style>a').toEqual([['Text', 'a']]);
     });
+
+    it('should not ignore namespaced SVG <style> elements', () => {
+      expectFromHtml('<svg><style>.a { fill: none; }</style></svg>').toEqual([
+        ['Element', ':svg:svg'],
+        ['Element', ':svg:style'],
+        ['Text', '.a { fill: none; }'],
+      ]);
+    });
   });
 
   describe('<link rel="stylesheet">', () => {