Global Styles do not override shadow dom style

Question

According to https://developers.google.com/web/fundamentals/web-components/shadowdom#stylefromoutside :

Outside styles always win over styles defined in shadow DOM. For example, if the user writes the selector fancy-tabs { width: 500px; }, it will trump the component's rule: :host { width: 650px;}.

This doesn't seem to work in my example. I have setup an app-overlay component. Inside I have a div with a .child class. According to the above source, I'd expect the child to have the padding as set in the global scope:

app-overlay .child {
  padding: 0 25%;
}

See full example here: http://plnkr.co/edit/YQOmtxSA9AThCcNmrEJc?p=preview

Note that the padding that is set as global, is not applied to the app-overlay child (even though, it's supposed to win over the component's style).

Is there any step I'm missing?

Answer 1

Ok, that's just plain confusing so I put it here in case someone crashes into it.

Overriding via global scope styling works only for inheritable CSS properties. If you want to set some non-inheritable property (like padding - see full list here ).

So I guess the only way to do this for non-inheritable properties is by either injecting CSS via the template (eg calling a file) or by css variables.