diff --git a/src/generators/server-side-rendering/visitors/Component.ts b/src/generators/server-side-rendering/visitors/Component.ts
index 4843010fcb..2169ee9b6e 100644
--- a/src/generators/server-side-rendering/visitors/Component.ts
+++ b/src/generators/server-side-rendering/visitors/Component.ts
@@ -6,7 +6,7 @@ import { AppendTarget } from '../interfaces';
 import { Node } from '../../../interfaces';
 import getObject from '../../../utils/getObject';
 import getTailSnippet from '../../../utils/getTailSnippet';
-import { stringify } from '../../../utils/stringify';
+import { escape, stringify } from '../../../utils/stringify';
 
 export default function visitComponent(
 	generator: SsrGenerator,
@@ -14,7 +14,7 @@ export default function visitComponent(
 	node: Node
 ) {
 	function stringifyAttribute(chunk: Node) {
-		if (chunk.type === 'Text') return chunk.data;
+		if (chunk.type === 'Text') return escape(chunk.data);
 		if (chunk.type === 'MustacheTag') {
 			block.contextualise(chunk.expression);
 			const { snippet } = chunk.metadata;
diff --git a/test/runtime/samples/sigil-component-attribute/Widget.html b/test/runtime/samples/sigil-component-attribute/Widget.html
new file mode 100644
index 0000000000..f0136f9405
--- /dev/null
+++ b/test/runtime/samples/sigil-component-attribute/Widget.html
@@ -0,0 +1 @@
+<div>{{value}}</div>
diff --git a/test/runtime/samples/sigil-component-attribute/_config.js b/test/runtime/samples/sigil-component-attribute/_config.js
new file mode 100644
index 0000000000..079bf3e9ab
--- /dev/null
+++ b/test/runtime/samples/sigil-component-attribute/_config.js
@@ -0,0 +1,4 @@
+export default {
+	data: { foo: 'foo' },
+	html: `<div>foo @ foo # foo</div>`,
+};
diff --git a/test/runtime/samples/sigil-component-attribute/main.html b/test/runtime/samples/sigil-component-attribute/main.html
new file mode 100644
index 0000000000..c9302309d2
--- /dev/null
+++ b/test/runtime/samples/sigil-component-attribute/main.html
@@ -0,0 +1,6 @@
+<Widget value='foo @ {{foo}} # foo'/>
+
+<script>
+	import Widget from './Widget.html';
+	export default { components: { Widget } };
+</script>