Setting selectiveClient: 'deep' breaks components with conditional slots

[brc-dd]

Environment

• Operating System: Linux
• Node Version: v18.18.0
• Nuxt Version: 3.11.1
• CLI Version: 3.11.0
• Nitro Version: 2.9.4
• Package Manager: npm@10.2.3
• Builder: -
• User Config: experimental
• Runtime Modules: -
• Build Modules: -

Reproduction

https://stackblitz.com/edit/github-romtaf

Describe the bug

Setting componentIslands.selectiveClient to deep currently breaks things like conditionally rendered slots because the transform isn't handling directives properly. It's transforming v-if="foo" to :props="[{ v-if: `foo` }]"

Additional context

Also, if I refactor to template + v-if + slot (https://stackblitz.com/edit/github-romtaf-cwixc1), I'm getting warnings like WARN [Vue warn]: Extraneous non-props attributes (data-v-875a1e80) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. However, there is no warning if I don't enable that option.

Logs

[vite-node] [plugin:vite:vue] [SyntaxError] ./components/Foo.vue:6:0

<script setup lang="ts">
import { vforToArray as __vforToArray } from '#app/components/utils'
import NuxtTeleportIslandComponent from '#app/components/nuxt-teleport-island-component'
import NuxtTeleportSsrSlot from '#app/components/nuxt-teleport-island-slot'
const foo = true;
</script>

<template>
  <NuxtTeleportSsrSlot name="default" :props="[{ v-if: `foo` }]"><slot v-if="foo" /></NuxtTeleportSsrSlot>
</template>

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• github-romtaf (Open reproduction)
• github-romtaf-cwixc1 (Open reproduction)