pauleveritt/scratch.html

## scratch.html
<html>
<head>
    <title>Custom Element Morph</title>
    <script src="https://unpkg.com/idiomorph"></script>
</head>
<body>
<hello-world name="World"></hello-world>
<button id="update">Update</button>
<script defer>
    class HelloWorld extends HTMLElement {
        constructor() {
            super();
        }

        connectedCallback() {
            const name = this.getAttribute("name")
            this.innerHTML = `<p>Hello <em>${name}</em></p>`
        }
    }

    customElements.define("hello-world", HelloWorld);
    const newHTML = "<div>I was <strong>updated</strong></div>";
    const button = document.getElementById("update");
    button.addEventListener("click", () => {
        const targets = document.getElementsByTagName("hello-world");
        Array.from(targets).forEach((target) => {
            Idiomorph.morph(target, newHTML, {morphStyle: 'innerHTML'});
        });
    })
</script>
</body>
</html>
	<html>
	<head>
	<title>Custom Element Morph</title>
	<script src="https://unpkg.com/idiomorph"></script>
	</head>
	<body>
	<hello-world name="World"></hello-world>
	<button id="update">Update</button>
	<script defer>
	class HelloWorld extends HTMLElement {
	constructor() {
	super();
	}

	connectedCallback() {
	const name = this.getAttribute("name")
	this.innerHTML = `<p>Hello <em>${name}</em></p>`
	}
	}

	customElements.define("hello-world", HelloWorld);
	const newHTML = "<div>I was <strong>updated</strong></div>";
	const button = document.getElementById("update");
	button.addEventListener("click", () => {
	const targets = document.getElementsByTagName("hello-world");
	Array.from(targets).forEach((target) => {
	Idiomorph.morph(target, newHTML, {morphStyle: 'innerHTML'});
	});
	})
	</script>
	</body>
	</html>