Vue3+Nuxt3如何将内容放入#document-fragment中？

直接在Vue模板里写<template id="some-id">达不到原生HTML效果的原因是：Vue的<template>是框架自身的语法占位符，它仅用于包裹内容，最终不会被渲染成DOM中的<template>元素，里面的内容会被直接提取出来挂载到父节点下，自然就不存在#document-fragment容器。

要实现原生HTML的结构，你需要手动创建原生的<template>元素，把内容塞进它的content（即对应的#document-fragment）里，具体有两种常用方式：

方式1：通过DOM操作手动创建 #

在模板里留一个容器，组件挂载后生成原生template并插入内容：

<template>
  <v-app>
    <div ref="templateContainer"></div>
  </v-app>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const templateContainer = ref(null)

onMounted(() => {
  // 创建原生template元素
  const nativeTemplate = document.createElement('template')
  nativeTemplate.id = 'some-id'

  // 生成需要放入fragment的内容
  const contentDiv = document.createElement('div')
  contentDiv.textContent = '这里是fragment内的内容'
  // 可按需添加更多子元素或属性

  // 将内容插入template的content（即#document-fragment）
  nativeTemplate.content.appendChild(contentDiv)

  // 将template挂载到页面容器中
  templateContainer.value.appendChild(nativeTemplate)
})
</script>

方式2：用Vue渲染函数生成原生template #

通过h函数直接创建原生<template>元素，再在挂载后补充内容：

<template>
  <v-app>
    <NativeTemplate />
  </v-app>
</template>

<script setup>
import { h, ref, onMounted } from 'vue'

const templateRef = ref(null)

onMounted(() => {
  if (templateRef.value) {
    const contentDiv = document.createElement('div')
    contentDiv.textContent = '这里是fragment内的内容'
    templateRef.value.content.appendChild(contentDiv)
  }
})

// 定义渲染原生template的组件
const NativeTemplate = () => h('template', { id: 'some-id', ref: templateRef })
</script>

两种方式最终生成的DOM结构都会和原生HTML一致：

<body>
  <div>
    <template id="some-id">
      #document-fragment
        <div>这里是fragment内的内容</div>
    </template>
  </div>
</body>

内容的提问来源于stack exchange，提问作者lando