diff --git a/.changeset/perfect-falcons-build.md b/.changeset/perfect-falcons-build.md
new file mode 100644
index 000000000..5094955be
--- /dev/null
+++ b/.changeset/perfect-falcons-build.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/compiler': patch
+---
+
+Fixes an issue where components with template literal attributes were printed with the name of the attribute as value.
diff --git a/internal/printer/printer.go b/internal/printer/printer.go
index fca1ad477..4cc34653a 100644
--- a/internal/printer/printer.go
+++ b/internal/printer/printer.go
@@ -352,7 +352,7 @@ func (p *printer) printAttributesToObject(n *astro.Node) {
 			p.addSourceMapping(a.KeyLoc)
 			p.printf(`"%s"`, strings.TrimSpace(a.Key))
 			p.print(":")
-			p.print("`" + strings.TrimSpace(a.Key) + "`")
+			p.print("`" + strings.TrimSpace(a.Val) + "`")
 		}
 	}
 	p.print("}")
diff --git a/internal/printer/printer_test.go b/internal/printer/printer_test.go
index 5a5b8327d..732a4be4a 100644
--- a/internal/printer/printer_test.go
+++ b/internal/printer/printer_test.go
@@ -2732,6 +2732,20 @@ const items = ["Dog", "Cat", "Platipus"];
 				code: `${$$renderComponent($$result,'Fragment',Fragment,{},{"default": () => $$render` + BACKTICK + `${` + BACKTICK + `${content}` + BACKTICK + `}` + BACKTICK + `,})}`,
 			},
 		},
+		{
+			name:   "template literal attribute on component",
+			source: `<Component class=` + BACKTICK + `red` + BACKTICK + ` />`,
+			want: want{
+				code: `${$$renderComponent($$result,'Component',Component,{"class":` + BACKTICK + `red` + BACKTICK + `})}`,
+			},
+		},
+		{
+			name:   "template literal attribute with variable on component",
+			source: `<Component class=` + BACKTICK + `${color}` + BACKTICK + ` />`,
+			want: want{
+				code: `${$$renderComponent($$result,'Component',Component,{"class":` + BACKTICK + `${color}` + BACKTICK + `})}`,
+			},
+		},
 		{
 			name:   "define:vars on style",
 			source: "<style>h1{color:green;}</style><style define:vars={{color:'green'}}>h1{color:var(--color)}</style><h1>testing</h1>",