insert-into-split-inline-5-shadow.html (1094B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script> 5 customElements.define("custom-element", class extends HTMLElement { 6 constructor() { 7 super(); 8 const template = document.getElementById("template"); 9 const shadowRoot = this.attachShadow({mode: "open"}) 10 .appendChild(template.content.cloneNode(true)); 11 } 12 }); 13 function doit() { 14 var newNode = document.createElement("span"); 15 newNode.appendChild(document.createTextNode("Nine")); 16 document.getElementById("target").appendChild(newNode); 17 } 18 </script> 19 <style> 20 body > custom-element { border: 3px solid blue } 21 </style> 22 </head> 23 <body onload='doit()'> 24 <template id="template"> 25 <!-- Multiple insertion points to force appends to be handled via 26 ContentInserted --> 27 <slot name="foo"></slot> 28 <slot name="bar"></slot> 29 <slot></slot> 30 </template> 31 <custom-element id="target" 32 ><span>One</span 33 ><span>Two</span 34 ><span>Three</span 35 ><div>Four</div 36 ><div>Five</div 37 ><span>Six</span 38 ><div>Seven</div 39 ><div>Eight</div 40 ></custom-element> 41 </body> 42 </html>