I am using a shadow DOM for CSS isolation. I want the rem font size to use the HTML element font size in the shadow DOM.
The font in <div class="shadow-div">shadow DOM font (should be 100px)</div> should be 100px but the rem size is still 16px.
Here is a small code snippet demonstrating what I want to do.
<style>
html {
font-size: 16px;
}
</style>
<div>light dom font</div>
<div id="root"></div>
<script>
const root = document.getElementById('root');
root.attachShadow({ mode: 'open' });
const html = document.createElement('html')
html.innerHTML = `
<head>
<style>
html {
font-size: 100px;
}
.shadow-div {
font-size: 1rem;
}
</style>
</head>
<body>
<div class="shadow-div">shadow dom font (should be 100px)</div>
</body>
`;
root.shadowRoot.appendChild(html);
</script>