bicknellr/ce-reactions-queue.html

## ce-reactions-queue.html
<html>
<head>
<script>
  customElements.define("x-outer", class extends HTMLElement {
    connectedCallback() {
      this.children[0].setAttribute('a', 'foo');
    }
  });

  customElements.define("x-inner", class extends HTMLElement {
    static get observedAttributes() {
      return ["a"];
    }

    connectedCallback() {
      this.removeAttribute('a');
    }

    attributeChangedCallback(name, oldValue, newValue) {
      console.log("<x-inner> attributeChangedCallback",
        "(", "name:", name, ", old:", oldValue, ", new:", newValue, ")"
      );
    }
  });

  window.addEventListener("load", function() {
    var template = document.querySelector("template");
    document.body.appendChild(document.importNode(template.content, true));
  });
</script>
</head>
<body>
  <template>
    <x-outer>
      <x-inner></x-inner>
    </x-outer>
  </template>
</body>
</html>
	<html>
	<head>
	<script>
	customElements.define("x-outer", class extends HTMLElement {
	connectedCallback() {
	this.children[0].setAttribute('a', 'foo');
	}
	});

	customElements.define("x-inner", class extends HTMLElement {
	static get observedAttributes() {
	return ["a"];
	}

	connectedCallback() {
	this.removeAttribute('a');
	}

	attributeChangedCallback(name, oldValue, newValue) {
	console.log("<x-inner> attributeChangedCallback",
	"(", "name:", name, ", old:", oldValue, ", new:", newValue, ")"
	);
	}
	});

	window.addEventListener("load", function() {
	var template = document.querySelector("template");
	document.body.appendChild(document.importNode(template.content, true));
	});
	</script>
	</head>
	<body>
	<template>
	<x-outer>
	<x-inner></x-inner>
	</x-outer>
	</template>
	</body>
	</html>