bicknellr/ce-reactions-queue_logging.html

## ce-reactions-queue_logging.html
<html>
<head>
<script>
  function logCall(title, fn) {
    console.group("CALL " + title);
    fn();
    console.groupEnd();
    console.log("EXIT " + title);
  }

  customElements.define("x-outer", class extends HTMLElement {
    connectedCallback() {
      console.log("START <x-outer> connectedCallback", ...arguments);
      console.log("<x-outer>.children[0].getAttribute('a'):", this.children[0].getAttribute('a'));

      logCall("<x-outer>.children[0].setAttribute('a', 'foo')", () => {
        this.children[0].setAttribute('a', 'foo');
      });

      console.log("<x-outer>.children[0].getAttribute('a'):", this.children[0].getAttribute('a'));
      console.log("END <x-outer> connectedCallback");
    }
  });

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

    connectedCallback() {
      console.log("START <x-inner> connectedCallback", ...arguments);
      console.log("<x-inner>.getAttribute('a'):", this.getAttribute('a'));

      logCall("<x-inner>.removeAttribute('a')", () => {
        this.removeAttribute('a');
      });

      console.log("<x-inner>.getAttribute('a'):", this.getAttribute('a'));
      console.log("END <x-inner> connectedCallback", ...arguments);
    }

    attributeChangedCallback(name, oldValue, newValue) {
      console.log("START <x-inner> attributeChangedCallback",
        "(", "name:", name, ", old:", oldValue, ", new:", newValue, ")"
      );
      console.log("<x-inner>.getAttribute('a'):", this.getAttribute('a'));
      console.log("END <x-inner> attributeChangedCallback");
    }
  });

  window.addEventListener("load", function() {
    var template = document.querySelector("template");

    var fragment;
    logCall("fragment = document.importNode(template.content, true)", () => {
      fragment = document.importNode(template.content, true);
    });
    logCall("document.body.appendChild(fragment)", () => {
      document.body.appendChild(fragment);
    });
  });
</script>
</head>
<body>
  <template>
    <x-outer>
      <x-inner></x-inner>
    </x-outer>
  </template>
</body>
</html>
	<html>
	<head>
	<script>
	function logCall(title, fn) {
	console.group("CALL " + title);
	fn();
	console.groupEnd();
	console.log("EXIT " + title);
	}

	customElements.define("x-outer", class extends HTMLElement {
	connectedCallback() {
	console.log("START <x-outer> connectedCallback", ...arguments);
	console.log("<x-outer>.children[0].getAttribute('a'):", this.children[0].getAttribute('a'));

	logCall("<x-outer>.children[0].setAttribute('a', 'foo')", () => {
	this.children[0].setAttribute('a', 'foo');
	});

	console.log("<x-outer>.children[0].getAttribute('a'):", this.children[0].getAttribute('a'));
	console.log("END <x-outer> connectedCallback");
	}
	});

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

	connectedCallback() {
	console.log("START <x-inner> connectedCallback", ...arguments);
	console.log("<x-inner>.getAttribute('a'):", this.getAttribute('a'));

	logCall("<x-inner>.removeAttribute('a')", () => {
	this.removeAttribute('a');
	});

	console.log("<x-inner>.getAttribute('a'):", this.getAttribute('a'));
	console.log("END <x-inner> connectedCallback", ...arguments);
	}

	attributeChangedCallback(name, oldValue, newValue) {
	console.log("START <x-inner> attributeChangedCallback",
	"(", "name:", name, ", old:", oldValue, ", new:", newValue, ")"
	);
	console.log("<x-inner>.getAttribute('a'):", this.getAttribute('a'));
	console.log("END <x-inner> attributeChangedCallback");
	}
	});

	window.addEventListener("load", function() {
	var template = document.querySelector("template");

	var fragment;
	logCall("fragment = document.importNode(template.content, true)", () => {
	fragment = document.importNode(template.content, true);
	});
	logCall("document.body.appendChild(fragment)", () => {
	document.body.appendChild(fragment);
	});
	});
	</script>
	</head>
	<body>
	<template>
	<x-outer>
	<x-inner></x-inner>
	</x-outer>
	</template>
	</body>
	</html>