MSEdgeExplainers/HTMLModules/demo/html5Element.html at master · Aaron033/MSEdgeExplainers · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!doctype html>
<html>
    <head>
        <title>HTML5 Element Module</title>
    </head>
    <body>
        <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");
                }
            }

            function initialize(elementName, windowForDefinition) {
                windowForDefinition.customElements.define(elementName, HTML5Element);
            }

            export { initialize };
        </script>
    </body>
</html>