Hydrating element removes every other attribute

[sammynave]

I'm new to Svelte so it's entirely possible i'm missing something basic. I'm seeing some weird behavior around the hydration feature. Attributes on the element being hydrated are removed and I'm not sure why.

For example, given this markup:

<span id="rehydrateContainer">
  <button data-track-id="123" class="button button--small" id="button" role="button" disabled>content</button>
</span>

and this component:

<button on:click="set({ count: count + 1 })">
  {text} {count}
</button>

<script>
  export default {
    oncreate() {
      this.set({ count: 0 });
    }
  };
</script>

the hydrated dom ends up being this:

<span id="rehydrateContainer">
  <button class="button button--small" role="button">rehydrated 0</button>
</span>

At first glance it seems that it maybe only works with certain attributes like class or role but that's not the case. When I change the order it seems like the odd numbered attributes are being removed.

given this:

<button class="button button--small" data-track-id="123" role="button" id="button" disabled>content</button>

we end up with this:

<button data-track-id="123" id="button">rehydrated 0</button>

here's a small reproduction to play around with: https://github.com/sammynave/rehydrate-attrs

[sammynave]

Thought I would have a good chunk of open source time to look into this today. So far I've only had time to add a failing test. Maybe helpful to someone?
https://github.com/sveltejs/svelte/compare/master...sammynave:multiple-attr-hydration?expand=1

[PaulBGD]

I do believe the hydration feature is meant to be used with SSR, not an unknown element with unknown attributes. While the odd numbered attributes thing is odd (unintended), I think your situation is a case of UD.

[Conduitry]

This still exists in Svelte 3. Here's a purer example that can be used in Sapper:

{#if process.browser}
	<div>
		Foo
	</div>
{/if}

<div attr-a attr-b attr-c attr-d attr-e>
	Bar
</div>

(where process.browser is replaced with false in the server bundle and true in the browser bundle). When hydrated, the first <div> is left with attr-b and attr-d still present, when it should have had all of its attributes removed.

[Conduitry]

I'm guessing the bug is that in this loop we don't want to be incrementing j after removing the attribute, and that's what causes alternate attributes to be skipped.

[Conduitry]

Fixed (finally!) in 3.17.2.