multipleinsertionpoints-ref2-shadow.xhtml (632B)
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <script> 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 </script> 13 </head> 14 15 <body> 16 <template id="template"> 17 <div> 18 <slot name="foo"/> 19 </div> 20 <div> 21 <slot/> 22 </div> 23 </template> 24 <custom-element style="display: block;"> 25 <div>3</div><span slot="foo">1</span><div>4</div><span slot="foo">2</span><div>5</div> 26 </custom-element> 27 </body> 28 </html>