index5.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recebendo Atributos</title>
    <script>
        class HelloWorldElement extends HTMLElement {
            static observedAttributes = ["data-name"]

            constructor() {
                super()
                this.attachShadow({ mode: "open" })
                this.spanEl = document.createElement("span")
                this.shadowRoot.append(this.spanEl)
            }
            
            connectedCallback() {
                const name = this.getAttribute("data-name")
                this.spanEl.textContent = `Hello, ${name}!`
            }

            attributeChangedCallback(attr, oldValue, newValue) {
                if(attr === "data-name") {
                    this.spanEl.textContent = `Hello, ${newValue}!`
                }
            }
        }

        customElements.define("hello-world", HelloWorldElement)
    </script>
</head>
<body>
    <h1>Exemplo 05</h1>
    <hello-world data-name="João"></hello-world>
</body>
</html>