334829-1a-shadow.xhtml (1178B)
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <script type="application/x-javascript"> 4 customElements.define("custom-element", class extends HTMLElement { 5 constructor() { 6 super(); 7 const template = document.getElementById("template"); 8 const shadowRoot = this.attachShadow({mode: "open"}) 9 .appendChild(template.content.cloneNode(true)); 10 } 11 }); 12 function runTest() { 13 var div = document.getElementById("testDiv"); 14 15 // First we have to make sure that we've looked up the primary frame for 16 // the textnode. Appending a space should do the trick. 17 div.firstChild.data += " "; 18 19 // Now flush our reflow 20 document.body.offsetWidth; 21 22 var node = document.createElementNS("http://www.w3.org/1999/xhtml", 23 "span"); 24 div.appendChild(node); 25 node.appendChild(document.createTextNode("This text should appear")); 26 } 27 </script> 28 </head> 29 30 <body onload="runTest()"> 31 <template id="template"><span><slot/></span></template> 32 <custom-element id="testDiv" style="width: 0; display: block;">This is text in a div</custom-element> 33 </body> 34 </html>