<!-- View component that includes the result of a single execution. -->

<template id="tmpl-jupyter-display-area">
  <style>
    @import "bower_components/katex/dist/katex.min.css";
    * {
      padding: 0;
      margin: 0;
    }
  </style>
  <div id="outputs"></div>
</template>

<script>
(function () {
  var importDoc = document.currentScript.ownerDocument;

  var resultPrototype = Object.create(HTMLElement.prototype);

  resultPrototype.createdCallback = function() {
    var t = importDoc.querySelector('#tmpl-result');
    var node = document.importNode(t.content, true);
    this.root = this.createShadowRoot();
    this.root.appendChild(node);

    this.state = this.root.getElementById("state");
    this.outputContainer = this.root.getElementById("output-container");

  };


  resultPrototype.consume = function (message) {
    // message comes from IOPub or whatever

  }

  document.registerElement('jupyter-display-area', {prototype: resultPrototype});
})();
</script>

<!-- View component that includes the result of a single execution. -->

<template id="tmpl-jupyter-display-area">
  <style>
    @import "bower_components/katex/dist/katex.min.css";
    * {
      padding: 0;
      margin: 0;
    }
  </style>
  <div id="outputs"></div>
</template>

<script src="jupyter-display-area.js">
</script>

Clean out the previous display area.
Clean out the previous display area.
