Comment by wruza

What if I have text nodes in the mix? And I don't know that in advance, e.g. I'm doing <div>{content}</>? What if this div is in a same-class flexbox and now its margins or --vars clash with the defaults of its parent, which it knows nothing about by the principle of isolation? Then you may suggest using wrapper boxes for all children, but how e.g. align-baseline crosses that border is now a mystery that depends on a bunch of other properties at each side.

Your reply is correct, but it's exactly that "just do this specific configuration" sort of correct, which punctures component isolation all the way through and makes these layers leak into each other, creating a non-refactorable mess.