Today, I found out about a very weird interaction that varies across modern browsers. Shadow-DOM is used to obscure elements from the parent context. See the example below for what it actually does
<body>
<style>
p {
color:red; /* this style does not affect the <p> tag below */
}
</style>
<customelement>
#shadow-root (open)
<p>obscure me</p>
</customelement>
</body>This also means that an <iframe> inside a Shadow-DOM is hidden or obscured from the parent context. That’s perfectly fine and inline with the intent of Shadow-DOMs.
However, the difference comes in how it affects window.frames . For example, in Chrome, <iframe> hidden in a Shadow-DOM is not included in window.frames , while in Firefox, it is.
Be First to Comment