diff --git a/src/Microsoft.AspNetCore.Blazor.Browser.JS/src/Rendering/BrowserRenderer.ts b/src/Microsoft.AspNetCore.Blazor.Browser.JS/src/Rendering/BrowserRenderer.ts
index 0d4b0af817..9da226a6ed 100644
--- a/src/Microsoft.AspNetCore.Blazor.Browser.JS/src/Rendering/BrowserRenderer.ts
+++ b/src/Microsoft.AspNetCore.Blazor.Browser.JS/src/Rendering/BrowserRenderer.ts
@@ -79,7 +79,7 @@ export class BrowserRenderer {
           const frame = batch.referenceFramesEntry(referenceFrames, frameIndex);
           const siblingIndex = editReader.siblingIndex(edit);
           const element = getLogicalChild(parent, childIndexAtCurrentDepth + siblingIndex);
-          if (element instanceof HTMLElement) {
+          if (element instanceof Element) {
             this.applyAttribute(batch, componentId, element, frame);
           } else {
             throw new Error(`Cannot set attribute on non-element child`);
diff --git a/test/Microsoft.AspNetCore.Blazor.E2ETest/Tests/ComponentRenderingTest.cs b/test/Microsoft.AspNetCore.Blazor.E2ETest/Tests/ComponentRenderingTest.cs
index 6ec4aea5b6..9c8312f04e 100644
--- a/test/Microsoft.AspNetCore.Blazor.E2ETest/Tests/ComponentRenderingTest.cs
+++ b/test/Microsoft.AspNetCore.Blazor.E2ETest/Tests/ComponentRenderingTest.cs
@@ -306,6 +306,10 @@ namespace Microsoft.AspNetCore.Blazor.E2ETest.Tests
 
             var svgCircleElement = appElement.FindElement(By.XPath("//*[local-name()='circle' and namespace-uri()='http://www.w3.org/2000/svg']"));
             Assert.NotNull(svgCircleElement);
+            Assert.Equal("10", svgCircleElement.GetAttribute("r"));
+
+            appElement.FindElement(By.TagName("button")).Click();
+            WaitAssert.Equal("20", () => svgCircleElement.GetAttribute("r"));
         }
 
         [Fact]
diff --git a/test/testapps/BasicTestApp/SvgComponent.cshtml b/test/testapps/BasicTestApp/SvgComponent.cshtml
index ef745967f2..b4c9186145 100644
--- a/test/testapps/BasicTestApp/SvgComponent.cshtml
+++ b/test/testapps/BasicTestApp/SvgComponent.cshtml
@@ -1,3 +1,9 @@
-<svg height="250" width="250">
-    <circle cx="125" cy="125" r="100" fill="red" stroke="black" stroke-width="3" />
-</svg>
\ No newline at end of file
+<svg height="250" width=250>
+    <circle cx="125" cy="125" r=@radius fill="red" stroke="black" stroke-width="3" />
+</svg>
+
+<button onclick=@(() => { radius *= 2; })>Click me</button>
+
+@functions {
+    int radius = 10;
+}