Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <user-card> #shadow-root <div> Name: <slot name="username"> <!-- slot element is inserted into the slot --> <span slot="username">Jack Brown</span> </slot> </div> <div> Id: <slot name="id"> <span slot="id">1125</span> </slot> </div> </user-card> <script> // light DOM <span> nodes are still at the same place, under `<user-card>` alert( document.querySelectorAll('user-card span').length ); // 2 </script> </body> </html>