Native HTML dialog element in Svelte

Dialog.svelte

<script>
  export let dialog
</script>
<dialog bind:this={dialog} on:close>
  <slot/>
</dialog>

Whatever.svelte

<script>
  import Dialog from './Dialog.svelte'
  let dialog
</script>

<button on:click={() => dialog.showModal()}>Open modal</button>

<Dialog bind:dialog on:close={() => console.log('Modal closed')}>
  <p>I love how easy this is! 😍</p>
</Dialog>

Found originally on DEV community and copied here because I can’t stand that website’s dick bars. 😜