They must be unique only within the shadow tree. Accessing Iframe elements or bidirectional communication between frame and parent page isn’t as painful as people speak about it. three. Contrast this with HTML5 web components which offer an elegant way to expose a clean API for accessing the values of custom elements. Shadow DOM is a technique to help web developers to better encapsulate their code. If you are considering the move to Shadow DOM, you need to look out for the same pitfalls: The results in the real world were much better than our benchmarks had told us. Therefore, all of our iframed content is treated as its own site with no benefit to the parent page / domain. When we set up an iframe, we need to send messages from the iframe to the parent/host page to communicate events backwards and forwards: if the user resizes their window, we need the parent to tell the iframe; if the iframe changes its dimensions by loading in extra content, the iframe needs to inform the parent; if a user clicks a button, we need to inform the parent so we can track this data to measure our project efficiency etc. Using real user data, we have found that on our first project 95% of users loaded the content in under four seconds vs 77% of iframe users. Jason Strimpel. Initially, we considered using web components for encapsulation. Shadow boundary: the place where the shadow DOM ends, and the regular DOM begins. It does the same thing that and