Merge pull request #1375 from sveltejs/gh-1369

assign custom methods to custom element prototype

src/compile/dom/index.ts

@@ -120,8 +120,6 @@ export default function dom(
 		? 'svelte/shared.js'
 		: options.shared || '';
 
-	let prototypeBase = `${name}.prototype`;
-
 	const proto = sharedPath
 		? `@proto`
 		: deindent`
@@ -301,8 +299,9 @@ export default function dom(
 				`}
 			}
 
-			customElements.define("${compiler.tag}", ${name});
-			@assign(@assign(${prototypeBase}, ${proto}), {
+			@assign(${name}.prototype, ${proto});
+			${templateProperties.methods && `@assign(${name}.prototype, %methods);`}
+			@assign(${name}.prototype, {
 				_mount(target, anchor) {
 					target.insertBefore(this, anchor);
 				},
@@ -311,6 +310,8 @@ export default function dom(
 					this.parentNode.removeChild(this);
 				}
 			});
+
+			customElements.define("${compiler.tag}", ${name});
 		`);
 	} else {
 		builder.addBlock(deindent`
@@ -318,8 +319,8 @@ export default function dom(
 				${constructorBody}
 			}
 
-			@assign(${prototypeBase}, ${proto});
-			${templateProperties.methods && `@assign(${prototypeBase}, %methods);`}
+			@assign(${name}.prototype, ${proto});
+			${templateProperties.methods && `@assign(${name}.prototype, %methods);`}
 		`);
 	}
 

test/custom-elements/samples/custom-method/main.html

@@ -0,0 +1,13 @@
+<p>{foo}</p>
+
+<script>
+	export default {
+		tag: 'custom-element',
+
+		methods: {
+			updateFoo(value) {
+				this.foo = value;
+			}
+		}
+	};
+</script>

test/custom-elements/samples/custom-method/test.js

@@ -0,0 +1,12 @@
+import * as assert from 'assert';
+import './main.html';
+
+export default function (target) {
+	target.innerHTML = '<custom-element name="world"></custom-element>';
+	const el = target.querySelector('custom-element');
+
+	el.updateFoo(42);
+
+	const p = el.shadowRoot.querySelector('p');
+	assert.equal(p.textContent, '42');
+}

test/js/samples/css-shadow-dom-keyframes/expected-bundle.js

@@ -185,8 +185,8 @@ class SvelteComponent extends HTMLElement {
 	}
 }
 
-customElements.define("custom-element", SvelteComponent);
-assign(assign(SvelteComponent.prototype, proto), {
+assign(SvelteComponent.prototype, proto);
+assign(SvelteComponent.prototype, {
 	_mount(target, anchor) {
 		target.insertBefore(this, anchor);
 	},
@@ -196,4 +196,6 @@ assign(assign(SvelteComponent.prototype, proto), {
 	}
 });
 
+customElements.define("custom-element", SvelteComponent);
+
 export default SvelteComponent;

test/js/samples/css-shadow-dom-keyframes/expected.js

@@ -51,8 +51,8 @@ class SvelteComponent extends HTMLElement {
 	}
 }
 
-customElements.define("custom-element", SvelteComponent);
-assign(assign(SvelteComponent.prototype, proto), {
+assign(SvelteComponent.prototype, proto);
+assign(SvelteComponent.prototype, {
 	_mount(target, anchor) {
 		target.insertBefore(this, anchor);
 	},
@@ -61,4 +61,6 @@ assign(assign(SvelteComponent.prototype, proto), {
 		this.parentNode.removeChild(this);
 	}
 });
+
+customElements.define("custom-element", SvelteComponent);
 export default SvelteComponent;