Picture this!

• This example uses a trick CSS selector to capture all elements in the DOM: "*:not(style)". The idea is that we want to apply the non-inherited border to all elements, except the style element.
• However, there are several aspects of the StyleMatroska that becomes relevant here. First, the "*:not(style)" selector applies to the slot element too. Second, when we set "display: block;", this drastically alters the behavior of the slot element. Third, the green and grey border is the added to the slot element too, in addition to the div in both web components and the passe-partout in GreenFrame.
• Finally, we are exposed to the fact that slots are nested in reverse document order in the flattened DOM. Thinking about the structure, it would be natural to think of the slot element of PassePartout being wrapped inside the slot element of GreenFrame. However, the opposite is true. And therefore, an extra green frame appears _inside_ the PassePartout.