| 1 | <script setup lang="ts"> |
| 2 | import { computed, ref, watchEffect } from 'vue' |
| 3 | |
| 4 | const props = defineProps<{ |
| 5 | innerHtml: string |
| 6 | }>() |
| 7 | |
| 8 | const emit = defineEmits<{ |
| 9 | (event: 'shadow', div: ShadowRoot): void |
| 10 | }>() |
| 11 | |
| 12 | const el = ref<HTMLDivElement>() |
| 13 | const shadow = computed(() => el.value ? (el.value.shadowRoot || el.value.attachShadow({ mode: 'open' })) : null) |
| 14 | watchEffect(() => { |
| 15 | if (shadow.value && props.innerHtml) { |
| 16 | emit('shadow', shadow.value) |
| 17 | shadow.value.innerHTML = props.innerHtml |
| 18 | } |
| 19 | }) |
| 20 | </script> |
| 21 | |
| 22 | <template> |
| 23 | <div ref="el" /> |
| 24 | </template> |
| 25 |