add test

test/runtime-puppeteer/samples/dynamic-element-custom-element/_config.js

@@ -0,0 +1,47 @@
+export default {
+	skip_if_ssr: true,
+	props: {
+		tag: 'my-custom-element',
+		name: null
+	},
+	html: `
+		<my-custom-element id="a">Hello null!</my-custom-element>
+		<my-custom-element id="b">Hello null!</my-custom-element>
+	`,
+
+	test({ assert, component, target }) {
+		component.name = undefined;
+		assert.htmlEqual(
+			target.innerHTML,
+			`<my-custom-element id="a">Hello undefined!</my-custom-element>
+			 <my-custom-element id="b">Hello undefined!</my-custom-element>`
+		);
+
+		component.name = 'foo';
+		assert.htmlEqual(
+			target.innerHTML,
+			`<my-custom-element id="a">Hello foo!</my-custom-element>
+			 <my-custom-element id="b">Hello foo!</my-custom-element>`
+		);
+
+		component.tag = null;
+		assert.htmlEqual(
+			target.innerHTML,
+			'<my-custom-element id="b">Hello foo!</my-custom-element>'
+		);
+
+		component.tag = 'div';
+		assert.htmlEqual(
+			target.innerHTML,
+			`<div name="foo" id="a"></div>
+			 <my-custom-element id="b">Hello foo!</my-custom-element>`
+		);
+
+		component.tag = 'my-custom-element';
+		assert.htmlEqual(
+			target.innerHTML,
+			`<my-custom-element id="a">Hello foo!</my-custom-element>
+			 <my-custom-element id="b">Hello foo!</my-custom-element>`
+		);
+	}
+};

test/runtime-puppeteer/samples/dynamic-element-custom-element/main.svelte

@@ -0,0 +1,32 @@
+<script>
+	class MyCustomElement extends HTMLElement {
+		constructor() {
+			super();
+			this._name = null;
+		}
+
+		/**
+		 * @param {string} name
+		 */
+		set name(name) {
+			this._name = name;
+			this.render();
+		}
+
+		connectedCallback() {
+			this.render();
+		}
+
+		render() {
+			this.innerHTML = "Hello " + this._name + "!";
+		}
+	}
+
+	window.customElements.define("my-custom-element", MyCustomElement);
+
+	export let tag;
+	export let name;
+</script>
+
+<svelte:element this="{tag}" {name} id="a" />
+<my-custom-element {name} id="b" />