How to get the inherited values of element from JavaScript-CodePudding

Okay, so I've a script that gets the CSS property value of a clicked element. For this, I avoided window.getComputedStyle() because it basically converts rem values to px and so on... Instead, I've used CSSStyleSheet.cssRules just to keep the originality of the actual given units and not converting them.

And this does works fine! but it fails to capture CSSRules that are inherited from the parent element since the styles are not directly applied to the element.

For example:

<style>
  #new {
    font-size: 2rem;
  }
</style>

<div id="new">

<h1 >This is a heading</h1>
<!––Here h1 is inheriting font-size from div that can't be catched by CSSRules––>

</div>

For this case, getComputedStyle() works the best as CSSRules failed to catch the inherited properties but again, the problem of units arises so I cannot use that.

Or maybe something to get the metric unit of an element?