class MyHeader extends HTMLElement {
    connectedCallback() {
        this.innerHTML ="<header>" +
                            "<nav>" +
                                "<ul>" +
                                    "<li><a href=#>test1</a></li>" +
                                    "<li><a href=#>test2</a></li>" +
                                    "<li><a href=#>test3</a></li>" +
                                "</ul>" +
                            "</nav>" +
                        "</header>";
    }
}


class MyFooter extends HTMLElement {
    connectedCallback() {
        this.innerHTML ="<footer>" +
                            "@2024 mypage"+
                        "</footer>";
    }
}

customElements.define("my-header", MyHeader)
customElements.define("my-footer", MyFooter)