<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <script type="application/x-javascript">
    customElements.define("custom-element", class extends HTMLElement {
      constructor() {
        super();
        const template = document.getElementById("template");
        const shadowRoot = this.attachShadow({mode: "open"})
          .appendChild(template.content.cloneNode(true));
      }
    });
    function runTest() {
      var div = document.getElementById("testDiv");

      // First we have to make sure that we've looked up the primary frame for
      // the previous child span.  Appending text to it should do the trick.
      div.firstChild.
          appendChild(document.createTextNode("This is text in a div "));

      // Now flush out reflow
      document.body.offsetWidth;

      var node = document.createElementNS("http://www.w3.org/1999/xhtml",
                                          "span");
      div.appendChild(node);
      node.appendChild(document.createTextNode("This text should appear"));
    }
  </script>
</head>

<body onload="runTest()">
<template id="binding"><span><slot/></span></template>
<custom-element id="testDiv" style="width: 0; display: block;"><span></span></custom-element>
</body>
</html>