我使用 Shadow DOM 进行 CSS 隔离。我希望rem字体大小使用 Shadow DOM 中的 HTML 元素字体大小。
中的字体<div class="shadow-div">shadow DOM font (should be 100px)</div>应该是,100px但 rem 大小仍然是16px。
这是一个小代码片段,演示了我想要做什么。
<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> …Run Code Online (Sandbox Code Playgroud)