ola*_*nod 5 styles web-component shadow-dom
Shadow DOM 支持使用<link>标签来加载样式，其范围与声明的样式相同<style>，这非常方便，但带来的问题是样式仅在准备就绪时才应用，并且在加载样式时存在 FOUC:defined例如，使用自定义元素的伪选择器无法阻止这种情况。我遇到的另一个问题是在构建或连接自定义元素时测量影子根内部的元素，因为在加载和应用样式表后才知道“真实”尺寸，我不知道什么时候会发生这种情况（也许ResizeObserver实施时会有帮助吗？）
任何人都可以想出一种聪明的方法来解决这些问题（无需手动内联样式或使用构建步骤）？我的担心有道理吗？考虑到<link rel="stylesheet>在<head>块渲染中并且此功能应该与此类似，是否可以将其视为错误？
如果你想避免 FOUC，你应该隐藏该元素，直到应用样式。fetch当您使用或XMLHttpRequest、 或时，您可以知道样式何时加载<link onload=...>。
关于维度问题，它不是 Shadow DOM 特有的，而是 CSS 架构的结果。
无论如何，通常建议设置元素的宽度和高度，以避免 FOUC，同时也避免整页重绘，从而加快渲染速度。
请注意，<link rel="stylsheet">Shadow DOM 中的支持是非常新的，因此它可能无法在所有浏览器中按预期工作。
| 归档时间： |
|
| 查看次数： |
1062 次 |
| 最近记录： |