<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 textnode. Appending a space should do the trick. div.firstChild.data += " "; // Now flush our 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="template"><span><slot/></span></template> <custom-element id="testDiv" style="width: 0; display: block;">This is text in a div</custom-element> </body> </html>