I love web components, but the fact that there's plenty of shadow-dom piercing properties defeats their purpose of "author them once, reuse them in different applications".

One very common pitfall I encounter is the html's own base font size, since it impacts all the calculations in your webcomponents. Use a webcomponent with a font size of 12/14/16 and you get completely different behavior.

If they were truly isolated they would really scale, but they don't.

Not to nag, but this seems like a design error? WC font settings should be inherited and relative, rather than any specific pixel size. Designs should be robust enough to support overflowing text, should the user increase scale/zoom/etc.

Admittedly, I might not be understanding your problem well enough, so sorry in advance if I've mischaracterized the issue.

Shouldn't you be using relative units like rem anyways?