diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts index 1b736d2f02..5aff966996 100644 --- a/src/compiler/compile/nodes/Element.ts +++ b/src/compiler/compile/nodes/Element.ts @@ -219,7 +219,11 @@ export default class Element extends Node { if (this.name === 'pre' || this.name === 'textarea') { const first = info.children[0]; if (first && first.type === 'Text') { - // The leading newline character should be stripped. + // The leading newline character needs to be stripped because of a qirk, + // it is ignored by browsers if the tag and its contents are set through + // innerHTML (NOT if set through the innerHTML of the tag or dynamically). + // Therefore strip it here but add it back in the appropriate + // places if there's another newline afterwards. // see https://html.spec.whatwg.org/multipage/syntax.html#element-restrictions // see https://html.spec.whatwg.org/multipage/grouping-content.html#the-pre-element first.data = first.data.replace(start_newline, ''); diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index 8c7297b9b6..e50f0c45e1 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts @@ -1114,6 +1114,9 @@ export default class ElementWrapper extends Wrapper { function to_html(wrappers: Array, block: Block, literal: any, state: any, can_use_raw_text?: boolean) { wrappers.forEach(wrapper => { if (wrapper instanceof TextWrapper) { + // Don't add the
/ newline logic here because pre/textarea.innerHTML
+			// would keep the leading newline, too, only someParent.innerHTML = '..
..' won't
+
 			if ((wrapper as TextWrapper).use_space()) state.quasi.value.raw += ' ';
 
 			const parent = wrapper.node.parent as Element;