fallback-content-1.html (789B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <script> 5 function tweak() { 6 // div with style "border: 10px solid green" 7 var shadowDiv = document.createElement("div"); 8 shadowDiv.style.border = "10px solid green"; 9 10 // Insertion point will match nothing and use fallback content. 11 var slot = document.createElement("slot"); 12 shadowDiv.appendChild(slot); 13 14 // Append three nodes as children to use as fallback content. 15 slot.innerHTML = '<span style="background-color: orange">Hello</span> <span style="background-color: green">World</span>'; 16 17 var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'}); 18 shadowRoot.appendChild(shadowDiv); 19 } 20 </script> 21 </head> 22 <body onload="tweak()"> 23 <div id="outer"></div> 24 </body> 25 </html>