SVGElement hydration issue when using @html directive and IE11

[babeard]

I'm not sure if this is the appropriate place to file this issue, but since this repo's focus is on IE/Edge Legacy support, I thought I would start here.

The Problem

I came across a hydration bug within Svelte that relates to the @html directive and IE11's lack of support for SVGElement.prototype.innerHTML. As you can see in the example below, the icon is displayed before hydration and then disappears.

Example

<script>
  const iconData = `<line x1="12" y1="18" x2="12" y2="12"></line><line x1="9" y1="15" x2="15" y2="15"></line>`;
</script>
<div>Can you see the plus svg icon right below disappear upon hydration? 👇</div>
<svg>{@html iconData}</svg>

results in something similar to:

Proposed Solution

Add a polyfill