web-components/inline.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web Component - Inline</title>
</head>
<body>
<my-dialog></my-dialog>

<template id="my-dialog">
    <div class="container">
        <div class="mask"></div>
        <div class="inner">
            <h3 class="title">test</h3>
            <p class="content"></p>
            <button class="cancel"></button>
            <button class="confirm"></button>
            <button class="close"></button>
        </div>
    </div>
</template>

<script type="module">
    const importDoc = document;

    class Dialog extends HTMLElement {
        constructor() {
            super();
            const shadowRoot = this.attachShadow({
                mode: 'open',
            });
            const template = importDoc.getElementById('my-dialog');
            shadowRoot.appendChild(template.content.cloneNode(true));
        }
    }

    window.customElements.define('my-dialog', Dialog);
</script>
</body>
</html>