Common Dialog LWC Component

commonDialog.html

<template>
    <template if:true={open}>
        <div>
            <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <header class="slds-modal__header">
                        <lightning-button-icon class="slds-modal__close" icon-name="utility:close" onclick={closeModal}></lightning-button-icon>
                        <h2>{title}</h2>
                    </header>
                    <div class="slds-modal__content slds-var-p-around_medium">
                        <slot name="body"></slot>
                    </div>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </div>
    </template>
</template>

commonDialog.js

import { LightningElement,track,api } from 'lwc';

export default class CommonDialog extends LightningElement {
    @track open = false;
    @api title='Test';
    @api 
    openmodal() {
        this.open = true
    }

    closeModal() {
        this.open = false
    } 
}

commonDialog.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>49.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
    <masterLabel>Common Dialog Box</masterLabel>
</LightningComponentBundle>