22 - custom element

[knife710]

<script setup lang='ts'>

import { propsToAttrMap } from "@vue/shared";
import { h } from "vue";
import { defineCustomElement } from "vue";
import { onMounted } from "vue"

/**
 * Implement the code to create a custom element.
 * Make the output of page show "Hello Vue.js".
*/
const VueJs = defineCustomElement({
  props: {
    message: String
  },
  render() {
    return h('div', {}, {default: ()=> this.message})
  }
})

customElements.define('vue-js', VueJs)
onMounted(() => {
  document.getElementById("app")!.innerHTML = "<vue-js message=\"Hello Vue.js\"></vue-js>"
})

</script>

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