the joy of SSR

index.html

<!-- Case 1 -->
<my-input value="foo">
  <template shadowrootmode="open">
     <input value="foo">
  </template>
</my-input>

<script>
  myInput.value = "bar"
  customElements.define("my-input", MyInput)

  // => <my-input value="foo">
  // myInput.value => "bar" 
</script>

<!-- Case 2 -->
<my-input value="foo">
  <template shadowrootmode="open">
     <input value="foo">
  </template>
</my-input>

<script>
  myInput.value = null
  customElements.define("my-input", MyInput)

  // => <my-input value="foo">
  // myInput.value => null
</script>

<!-- Case 3 -->
<my-input value="foo">
  <template shadowrootmode="open">
     <input value="foo">
  </template>
</my-input>

<script>
  myInput.value = "bar"
  myInput.defaultValue = "baz"
  customElements.define("my-input", MyInput)

  // => <my-input value="baz">
  // myInput.value => "bar"
</script>

Solution: not sure yet. TLDR: tracking dirty values prior to the component connecting.