334829-1b-shadow.xhtml (1245B)
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 previous child span. Appending text to it should do the trick. 17 div.firstChild. 18 appendChild(document.createTextNode("This is text in a div ")); 19 20 // Now flush out reflow 21 document.body.offsetWidth; 22 23 var node = document.createElementNS("http://www.w3.org/1999/xhtml", 24 "span"); 25 div.appendChild(node); 26 node.appendChild(document.createTextNode("This text should appear")); 27 } 28 </script> 29 </head> 30 31 <body onload="runTest()"> 32 <template id="binding"><span><slot/></span></template> 33 <custom-element id="testDiv" style="width: 0; display: block;"><span></span></custom-element> 34 </body> 35 </html>