demo rem in web component/shadow dom

HTML

<test-component>
</test-component>

JavaScript

var template =`
<style>
* {
	font-size: 72px;
}
div {
	font-size:2rem;
}
</style>
<div>
	I am 2rem = 2*broser default
</div>
`
class TestTemplate extends HTMLElement {
	constructor(){
  	super();
    this.rt = this.attachShadow({mode:"open"});
		this.rt.innerHTML = template;
  }
}
customElements.define("test-component", TestTemplate);