| <!DOCTYPE html> |
| <html> |
| <body> |
| <style> div { width: 100px; height: 100px; } </style> |
| <div id="container" style="background: red;"> |
| <div id="host" style="background: blue;"><div id="child">Some content (DOM)</div></div> |
| </div> |
| <script> |
| |
| const slotted = document.querySelector('#slotted'); |
| |
| const shadowRoot = host.attachShadow({mode: 'closed'}); |
| shadowRoot.innerHTML = '<div style="width: 100px; height: 100px; background: green;"><slot></slot></div>'; |
| shadowRoot.querySelector('slot').remove(); |
| |
| document.body.getBoundingClientRect(); |
| |
| child.remove(); |
| |
| document.body.getBoundingClientRect(); |
| |
| </script> |
| </body> |
| </html> |
