// 在 head 标签中的 link 是同步渲染。
// 自定义属性值为 initial 时使用fallback 值； 即var 的第二个参数；
在head中常规加载基础样式， 各个模块 display: none; 并设置代表组件自定义属性值为 none
利用 js 异步加载其它组件样式
然后在组件样式表中加入依赖代码（在组件样式表中改变自定义属性的值）：
////// main.css
:root { --main-blocker: initial;} // 覆盖初始样式中自定义属性的值
main { display: var(--main-blocker, block); } // --main-blocker值属性无效使用block
////// comment.css
:root { --comments-blocker: var(--main-blocker);} // 依赖main组件的样式渲染
.comments { display: var(--comments-blocker, block);}
/////// about.css 根据设备 响应式调整 依赖样式渲染
:root { --about-me-blocker: var(--comments-blocker);} // 常规依赖comment组件渲染
.about-me { display: var(--about-me-blocker, block);}
@media (min-width: 600px) { // 宽屏
:root { --about-me-blocker: initial; } // 立即渲染
}
//////// footer.css 在main 和 about 之后渲染
:root { --footer-blocker: var(--main-blocker, var(--about-me-blocker));} // main和about都渲染了 footer才会是initial；
footer { display: var(--footer-blocker, block);} // footer等于initial才会渲染成block
