<template>
  <dialog>
    <slot></slot>
  </dialog>
</template>

<script>
import dialogPolyfill from 'dialog-polyfill'

export default {
  name: 'Modal',
  // props: {
  //   visible: Boolean
  // },
  // watch: {
  //   visible(val) {
  //     if (this.$el) {
  //       if (val) {
  //         this.$el.showModal()
  //       } else {
  //         this.$el.close()
  //       }
  //     }
  //   }
  // },
  mounted() {
    this.$nextTick(() => {
      dialogPolyfill.registerDialog(this.$el)
      this.$el.showModal()
    })
  }
}
</script>

<style lang="scss">
dialog {
  margin: 0;
  padding: 0;
  border: none;
}
</style>
