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