<script setup lang="ts">
import presetWind3 from '@unocss/preset-wind3'
import initUnocssRuntime from '@unocss/runtime'
import ShadowContent from './components/ShadowContent.vue'

const shadowHost = ref<HTMLElement>()

onMounted(() => {
  const shadow = shadowHost.value!.attachShadow({ mode: 'open' })
  const appContainer = document.createElement('div')
  shadow.appendChild(appContainer)
  createApp(ShadowContent).mount(appContainer)

  initUnocssRuntime({
    defaults: { presets: [presetWind3()] },
    rootElement: () => appContainer, // Styles will be injected here
  })
})
</script>

<template>
  <div id="app" class="font-sans">
    <div ref="shadowHost" />
    <p class="text-red-500 text-2xl font-bold">
      Styles should NOT apply here (outside shadow)
    </p>
  </div>
</template>

<template>
  <p class="text-red-500 text-2xl font-bold">
    Styles WILL apply here (inside shadow)
  </p>
</template>