correctly set mount anchor for HTML tags - fixes #2711

src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts

@@ -47,10 +47,10 @@ export default class RawMustacheTagWrapper extends Tag {
 				content => `${html_tag}.p(${content});`
 			);
 
-			const anchor = in_head ? 'null' : needs_anchor ? html_anchor : this.next ? this.next.var : 'null';
+			const update_anchor = in_head ? 'null' : needs_anchor ? html_anchor : this.next ? this.next.var : 'null';
 
-			block.builders.hydrate.add_line(`${html_tag} = new @HtmlTag(${init}, ${anchor});`);
-			block.builders.mount.add_line(`${html_tag}.m(${parent_node || '#target'}, anchor);`);
+			block.builders.hydrate.add_line(`${html_tag} = new @HtmlTag(${init}, ${update_anchor});`);
+			block.builders.mount.add_line(`${html_tag}.m(${parent_node || '#target'}${parent_node ? '' : ', anchor'});`);
 
 			if (needs_anchor) {
 				block.add_element(html_anchor, '@empty()', '@empty()', parent_node);

src/runtime/internal/dom.ts

@@ -252,7 +252,7 @@ export class HtmlTag {
 		this.u(html);
 	}
 
-	m(target: HTMLElement, anchor: HTMLElement) {
+	m(target: HTMLElement, anchor: HTMLElement = null) {
 		for (let i = 0; i < this.n.length; i += 1) {
 			insert(target, this.n[i], anchor);
 		}

test/js/samples/each-block-changed-check/expected.js

@@ -55,7 +55,7 @@ function create_each_block(ctx) {
 			append(span, t4);
 			append(span, t5);
 			append(div, t6);
-			html_tag.m(div, anchor);
+			html_tag.m(div);
 		},
 
 		p(changed, ctx) {

test/runtime/samples/each-block-keyed-html-b/_config.js

@@ -0,0 +1,14 @@
+export default {
+	html: `
+		<div><span>hello</span> John</div>
+		<div><span>hello</span> Jill</div>
+	`,
+
+	test({ assert, component, target }) {
+		component.names = component.names.reverse();
+		assert.htmlEqual(target.innerHTML, `
+			<div><span>hello</span> Jill</div>
+			<div><span>hello</span> John</div>
+		`);
+	}
+};

test/runtime/samples/each-block-keyed-html-b/main.svelte

@@ -0,0 +1,11 @@
+<script>
+	export let names = ['John', 'Jill'];
+</script>
+
+{#each names as name (name)}
+	<div>
+		<span>hello</span>
+		{@html name}
+	</div>
+{/each}
+