<awesome-stuff name="Randy"></awesome-stuff>

class AwesomeStuff extends HTMLElement {
    static observedAttributes = ['name'];

    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.name = 'World'; // Default value for the name
        this.render();
    }

    attributeChangedCallback(attrName, oldValue, newValue) {
        if (attrName === 'name') {
            this.name = newValue; // Update the name property
            this.render();
        }
    }

    render() {
        this.shadowRoot.innerHTML = `<h1>Hello ${this.name}!</h1>`;
    }
}

customElements.define('awesome-stuff', AwesomeStuff);