Interactive examples architecture and the shadow DOM
In our interactive examples architecture, examples are built as complete separate pages, served from their own domain, like this: https://interactive-examples.mdn.mozilla.net/pages/css/color.html. When we include them on MDN, we do it by creating an iframe in the MDN page, that contains the interactive examples page. So the interactive example is in its own isolated world, separate from the rest of the page.
This has some advantages. One is security: we don't have to worry much about what the example code is doing, because it can't get access to the rest of the page. So we don't really have to vet contributions much for security. Another is just isolation: if we do things in the interactive example they won't "escape" into the page. For example, in the JS interactive examples we redefine console.log() to make it write to the example's output pane, but we don't want that change to affect code running in the MDN page.
There are also some disadvantages