<template>
  <h1>Teleport</h1>
  <p>With &lt;teleport to="body"&gt; we move the red &lt;div&gt; from inside the component to the root of the body tag.</p>
  <comp-one></comp-one>
</template>

<script></script>

<style>
#app {
  width: 350px;
  margin: 10px;
}

#app > div {
  border: solid black 2px;
  padding: 10px;
  margin-top: 10px;
  background-color: rgb(186, 228, 255);
}

h2 {
  text-decoration: underline;
}
</style>                  

<template>
  <div>
    <h2>Component</h2>
    <p>This is the inside of the component.</p>
    <Teleport to="body">
      <div 
        id="redDiv" 
        @click="toggleVal = !toggleVal" 
        :style="{ backgroundColor: bgColor }"
      >
        Hello!<br>
        Click me!
      </div>
    </Teleport>
  </div>
</template>

<script>
export default {
  data() {
    return {
      toggleVal: true
    }
  },
  computed: {
    bgColor() {
      if (this.toggleVal) {
        return 'lightpink'
      }
      else {
        return 'lightgreen'
      }
    }
  }
}
</script>

<style scoped>
#redDiv {
  margin: 10px;
  padding: 10px;
  display: inline-block;
}

#redDiv:hover {
  cursor: pointer;
}
</style>                  

import { createApp } from 'vue'

import App from './App.vue'
import CompOne from './components/CompOne.vue'

const app = createApp(App)
app.component('comp-one', CompOne)
app.mount('#app')