I have a custom component and I'm using a number of those in the markup of the parent. When I declare a style within the custom component, it performs as expected. However, when I set the style in the parent component selecting each of the custom one, the formatting takes place but doesn't target the custom component - instead it gets a hit outside of it and not in relation of it.
In the Blitzy example, the border can be seen not around the hellows, but outside of them.
I don't understand why it happens, let alone how to resolve it.
Your custom components does not set the display css property so it defaults to display: inline. Borders do work kinda strange on inline elements... you can read more about it here: https://stackoverflow.com/a/5700058/6357653
In order to fix your problem you could add display: block to your custom component. Ref: https://stackblitz.com/edit/angular-rbpzwz