HTML slot元素实现简易弹框实例页面

演示HTML代码：

<h4>基本</h4>
<zxx-alert>
    <p slot="alert">插槽执行成功！</p>
</zxx-alert>

<h4>按钮非子元素不显示</h4>
<zxx-alert>
    <p slot="alert">插槽执行成功！</p>
    <div>
        <button slot="button">取消</button>
    </div>
</zxx-alert>

<h4>包括取消按钮</h4>
<zxx-alert>
    <p slot="alert">插槽执行成功！</p>
    <button slot="button">取消</button>
</zxx-alert>

模板HTML代码：

<template id="alertTpl">
    <style>
        :host(:not([open])) {
            display: none;
        }
        :host {
            position: fixed;
            left: 0; top: 0;
            height: 100%; width: 100%;
            background-color: rgba(25, 28, 34, 0.88);
            z-index: 19;
            display: grid;
            place-items: center;
        }
        dialog {
            position: static;
            display: inherit;
        }
    </style>
    <dialog>
        <slot name="alert">暂无提示信息</slot>
        <p>
            <button>确定</button>
            <slot name="button"></slot>
        </p>
    </dialog>
</template>
                

JS代码：

customElements.define('zxx-alert', class extends HTMLElement {
    constructor() {
        super();
        let contentDoc = document.getElementById('alertTpl').content;

        const shadowRoot = this.attachShadow({
            mode: 'open'
        }).append(contentDoc.cloneNode(true));  
    }
    connectedCallback () {
        // 确定按钮点击关闭弹框
        this.shadowRoot.querySelector('button').onclick = () => {
            this.toggleAttribute('open', false);
        };
        // 取消按钮点击关闭弹框
        this.shadowRoot.querySelector('[name="button"]').onclick = () => {
            this.toggleAttribute('open', false);
        };
    }
});