html5Element.html

<template id="html5ElementTemplate">
    <style>
        .outerDiv {
            border:0.1em solid blue;
            display:inline-block;
            padding: 0.4em;
        }

        .devText {
            font-weight: bold;
            font-size: 1.4em;
            text-align: center;
            margin-top: 0.3em;
        }

        .mainImage {
            height:254px;
        }
    </style>
    <div class="outerDiv">
        <img class="mainImage" src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" />
        <div class="devText">HTML Modules Are Great!</div>
    </div>
</template>
<script type="module">
    let moduleDocument = import.meta.document;

    class HTML5Element extends HTMLElement {
        constructor() {
            super();
            console.log("HTML5Element constructor");
            let shadowRoot = this.attachShadow({ mode: "closed" });
            let template = moduleDocument.getElementById("html5ElementTemplate");
            shadowRoot.appendChild(document.importNode(template.content, true));
        }

        connectedCallback() {
            console.log("HTML5Element connectedCallback");
        }
    }

    export { HTML5Element };
</script>