| <!DOCTYPE html> | |
| <script src='resources/shadow-dom.js'></script> | |
| <div id='host'> | |
| <template data-mode='open'> | |
| <style> | |
| div { | |
| background-color: green; | |
| } | |
| </style> | |
| <div><slot></slot></div> | |
| </template> | |
| <div id='hostchild'>Hello</div> | |
| </div> | |
| <script> | |
| hostchild.offsetTop; // Update layout before calling attachShadow() so that #hostchild has a layout object | |
| convertTemplatesToShadowRootsWithin(host); | |
| </script> |