Picture this!

Green and italic is specified in the outermost web component; grey and normal in the innermost. The result? grey italic.
The reason is that the CSS rules are applied in the normal DOM, then the DOM is flattened, and then the inheritance of CSS properties are calculated.

For the "font-style", it looks like this:

...
  < green-frame >                   italic
    < div >                         italic
      < passe-partout >             italic
        < div >                     normal
          < slot id="inner" >       normal
            < slot id="outer" >     italic
              Picture this!           => italic

For the "color", it looks like this:

...
  < green-frame >
    < div >                         green
      < passe-partout >
        < div >                     grey
          < slot id="inner" >
            < slot id="outer" >
              Picture this!           => grey