fallback-content-1.html 789 B

1234567891011121314151617181920212223242526
  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. // Insertion point will match nothing and use fallback content.
  10. var slot = document.createElement("slot");
  11. shadowDiv.appendChild(slot);
  12. // Append three nodes as children to use as fallback content.
  13. slot.innerHTML = '<span style="background-color: orange">Hello</span> <span style="background-color: green">World</span>';
  14. var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'});
  15. shadowRoot.appendChild(shadowDiv);
  16. }
  17. </script>
  18. </head>
  19. <body onload="tweak()">
  20. <div id="outer"></div>
  21. </body>
  22. </html>