asunar/index.html

## index.html
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    </head>
    <body>
        <p>Web Components Demo

        <div>
            <button is="hey-there-button" name="World">Howdy</button>
        </div>
        <script>


            class GreetingButton extends HTMLButtonElement {
                constructor() {
                    super();
                    this.name = 'Stranger';
                }

                connectedCallback() {
                    //called when an element is appended to a document
                    //may happen more than once ex. if elements is moved, removed and re-added
                    this.addEventListener('click', e=>alert(`Hello ${this.name}!`));
                }

                attributeChangedCallback(attrName, oldValue, newValue) {
                    if (attrName === 'name') {
                        if (newValue) {
                            this.name = newValue; //too much recursion
                        } else {
                            this.name = 'Stranger';
                        }
                    }
                }
            }

            GreetingButton.observedAttributes = ['name']
            customElements.define('hey-there-button', GreetingButton, {
                extends: 'button'
            });
        </script>
    </body>
</html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
	</head>
	<body>
	<p>Web Components Demo

	<div>
	<button is="hey-there-button" name="World">Howdy</button>
	</div>
	<script>


	class GreetingButton extends HTMLButtonElement {
	constructor() {
	super();
	this.name = 'Stranger';
	}

	connectedCallback() {
	//called when an element is appended to a document
	//may happen more than once ex. if elements is moved, removed and re-added
	this.addEventListener('click', e=>alert(`Hello ${this.name}!`));
	}

	attributeChangedCallback(attrName, oldValue, newValue) {
	if (attrName === 'name') {
	if (newValue) {
	this.name = newValue; //too much recursion
	} else {
	this.name = 'Stranger';
	}
	}
	}
	}

	GreetingButton.observedAttributes = ['name']
	customElements.define('hey-there-button', GreetingButton, {
	extends: 'button'
	});
	</script>
	</body>
	</html>