HTML way

Alert me!

<zino-alert id="alert-1"
    heading="HTML"
    text="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    type="success"></zino-alert>

<script type="module" src="../zino-alert.js"></script>
<script>
document.querySelector("#example-1").addEventListener("click", function (event) {
    const alert = document.querySelector("#alert-1");
    if (alert) {
        alert.open();
    }
});
</script>

DOM API

Alert me!

<script type="module" src="../zino-alert.js"></script>
<script>
document.querySelector("#example-2").addEventListener("click", function (event) {
    const alert = document.createElement("zino-alert");
    alert.heading = "DOM API";
    alert.type = "success";
    alert.text = "Autonomous WAI-ARIA accessible alert dialog.";
    document.body.appendChild(alert);
    alert.open();
});
</script>

Constructor

Alert me!

<script type="module">
import {ZinoAlert} from "../zino-alert.js";
document.querySelector("#example-3").addEventListener("click", function (event) {
    const alert = new ZinoAlert({
        heading: "Constructor",
        type: "success",
        text: "A web component build on Custom Elements and Shadow DOM APIs.",
        showCancelButton: "true",
        allowEscapeKey: "true"
    });
    document.body.appendChild(alert);
    alert.open();
});
</script>