diff --git a/src/compiler/compile/nodes/Attribute.ts b/src/compiler/compile/nodes/Attribute.ts
index c09f9c3074..97d2fd7b2e 100644
--- a/src/compiler/compile/nodes/Attribute.ts
+++ b/src/compiler/compile/nodes/Attribute.ts
@@ -9,7 +9,7 @@ import TemplateScope from './shared/TemplateScope';
 import { x } from 'code-red';
 
 export default class Attribute extends Node {
-	type: 'Attribute';
+	type: 'Attribute' | 'Spread';
 	start: number;
 	end: number;
 	scope: TemplateScope;
diff --git a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
index d2def7e5cf..2cd284108c 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts
@@ -44,9 +44,7 @@ export default class AttributeWrapper {
 		const element = this.parent;
 		const name = fix_attribute_casing(this.node.name);
 
-		let metadata = element.node.namespace ? null : attribute_lookup[name];
-		if (metadata && metadata.applies_to && !~metadata.applies_to.indexOf(element.node.name))
-			metadata = null;
+		const metadata = this.get_metadata();
 
 		const is_indirectly_bound_value =
 			name === 'value' &&
@@ -193,6 +191,13 @@ export default class AttributeWrapper {
 		}
 	}
 
+	get_metadata() {
+		if (this.parent.node.namespace) return null;
+		const metadata = attribute_lookup[fix_attribute_casing(this.node.name)];
+		if (metadata && metadata.applies_to && !metadata.applies_to.includes(this.parent.node.name)) return null;
+		return metadata;
+	}
+
 	get_class_name_text() {
 		const scoped_css = this.node.chunks.some((chunk: Text) => chunk.synthetic);
 		const rendered = this.render_chunks();
diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts
index d7c1c7686b..bb4c2d310a 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts
@@ -573,8 +573,7 @@ export default class ElementWrapper extends Wrapper {
 			}
 		});
 
-		// @ts-ignore todo:
-		if (this.node.attributes.find(attr => attr.type === 'Spread')) {
+		if (this.node.attributes.some(attr => attr.is_spread)) {
 			this.add_spread_attributes(block);
 			return;
 		}
@@ -591,21 +590,24 @@ export default class ElementWrapper extends Wrapper {
 		const initial_props = [];
 		const updates = [];
 
-		this.node.attributes
-			.filter(attr => attr.type === 'Attribute' || attr.type === 'Spread')
+		this.attributes
 			.forEach(attr => {
-				const condition = attr.dependencies.size > 0
-					? changed(Array.from(attr.dependencies))
+				const condition = attr.node.dependencies.size > 0
+					? changed(Array.from(attr.node.dependencies))
 					: null;
 
-				if (attr.is_spread) {
-					const snippet = attr.expression.manipulate(block);
+				if (attr.node.is_spread) {
+					const snippet = attr.node.expression.manipulate(block);
 
 					initial_props.push(snippet);
 
 					updates.push(condition ? x`${condition} && ${snippet}` : snippet);
 				} else {
-					const snippet = x`{ ${attr.name}: ${attr.get_value(block)} }`;
+					const metadata = attr.get_metadata();
+					const snippet = x`{ ${
+						(metadata && metadata.property_name) ||
+						fix_attribute_casing(attr.node.name)
+					}: ${attr.node.get_value(block)} }`;
 					initial_props.push(snippet);
 
 					updates.push(condition ? x`${condition} && ${snippet}` : snippet);