gpt4 book ai didi

styles - 使用链接样式阻止 shadow DOM 渲染

转载 作者:行者123 更新时间:2023-12-01 15:28:22 25 4
gpt4 key购买 nike

Shadow DOM 支持使用 <link>用于加载与使用 <style> 声明的样式具有相同范围的样式的标签这非常方便,但存在的问题是样式仅在准备就绪时才应用,并且在加载样式时,无法通过 :defined 阻止 FOUC。例如,自定义元素的伪选择器。我遇到的另一个问题是当自定义元素被构建或连接时测量阴影根内的元素,因为在加载和应用样式表后“真实”尺寸是已知的,我不知道什么时候会发生(也许ResizeObserver 实现后会有帮助吗?)
任何人都可以想出一种巧妙的方法来解决这些问题(无需手动内联样式或使用构建步骤)?我的担心有意义吗?鉴于 <link rel="stylesheet>,是否可以将其视为错误?在 <head>块渲染和这个功能应该是类似的吧?

最佳答案

如果你想避免 FOUC,你应该隐藏元素直到应用样式。使用 fetch 就可以知道你的样式什么时候加载了或 XMLHttpRequest , 或 <link onload=...> .

关于维度问题,它不是 Shadow DOM 特有的,而是 CSS 架构的结果。

无论如何,通常建议设置元素的宽度和高度以避免 FOUC,同时也避免整页重绘,从而加快渲染速度。

请注意 <link rel="stylsheet"> Shadow DOM 中的支持是非常新的,所以它可能不会在所有浏览器中按预期工作。

关于styles - 使用链接样式阻止 shadow DOM 渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47100410/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com