Vue version

3.2.45

Link to minimal reproduction

https://sfc.vuejs.org/#__DEV____SSR__eNp9kM1uwyAQhF8Fba8x3C1qqX0OLna8bYnMj5bFjRT53bu4jlQ1Uk4ww8wH7A3ectZrRejBljP5zKog1zy4aM2vIVsRjCEvI6MopezsV+XnVwdTujoYrBFjz8kZ44I5EStOEnjZE6qffRmnBVuHqaKUWljieWC8sjXtSpHmXn+Gu3enypzi8L4v1hzygdPE8Xo4gQ/N7sKY9aWkKD+/tYY7DoqDXu1O82Q0TTv4Ys6lN6Z8nNu8LkUn+jSy01Qj+4AaS+gmSt8FScAOTn8YRswVqSOMMxLSM+a/6AO3YTcXN9h+AJ+JmU4=

Steps to reproduce

There is a difference between local and the Vue SFC Playground

local

1. input

<script setup>
</script>

<template>
  <div id="box"></div>

  <teleport to="#box" :disabled="true">
    <p>text</p>
  </teleport>

  <teleport to="#box">
    <button>Button</button>
  </teleport>
</template>

2. inject the teleport markup into the correct location in final page HTML

// entry-server.js

const ctx = {}
const html = await renderToString(app, ctx)

console.log(ctx.teleports) // { '#box': '<!--teleport anchor--><button>Button</button><!--teleport anchor-->' }

then modify the content of #box to

<div id="box"><!--teleport anchor--><button>Button</button><!--teleport anchor--></div>

3. hydration error on the client

<div id="box"><button>Button</button><button>Button</button><!--teleport anchor--></div>

What is expected?

render the content correctly

What is actually happening?

[Vue warn]: Hydration children mismatch in