DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!
:defined
伪类选择器是 CSS 选择器级别 4 规范 的一部分,允许您定位使用 Web Components API 创建并在 JavaScript 中定义的自定义元素。 此外,此选择器与浏览器内置的任何标准元素匹配。
/* Select a specific custom element */
my-element:defined {
visibility: visible;
}
/* Select any defined elenent, custonm or not */
:defined {
visibility: visible;
}
/* Select an undefined custom element */
my-element:not(:defined) {
visibility: hidden;
}
语法
CSS :defined
伪类具有以下语法
<element-selector>:defined {}
<element-selector>
可以缺失,也可以是任何定位自定义元素的有效 CSS 选择器。 缺失它会定位任何自定义元素,而声明一个选择器会选择该特定自定义元素。
/* Selects any defined element */
:defined {}
/* Selects a custom <spicy-sections> element */
spicy-sections:defined {}
是的,确实有一个名为 <spicy-sections>
的自定义元素,有人已经发布了。
什么是已定义元素?
已定义元素与 Web Components 相关,Web Components 是一种 Web 功能,允许我们创建自己的自定义元素(例如 <pizza-pie>
),这些元素捆绑了该元素“工作”所需的所有内容,例如其 HTML、CSS 和 JavaScript。 我们通常在谈论自定义元素时简单地提到“Web Components”,因此您会听到这两个术语可以互换使用。
因此,已定义元素是使用 Web Components API 创建并使用 JavaScript 中的 customElements.define()
方法注册的自定义元素。
但是,该自定义元素只有在其 JavaScript 加载后才“已定义”。 在此之前,该元素处于未定义状态。 这与“内置”元素不同,“内置”元素是指任何标准 Web 元素,例如 <h1>
、<p>
、<main>
、<div>
、<span>
等。
需要注意的是,与自定义元素不同,内置元素始终被认为是已定义的。 这与自定义元素从未定义开始,只有在正确注册后才变为已定义的相反。 这意味着 CSS :defined
伪类可用于有选择地将样式应用于已定义且存在于 HTML 中的自定义元素。
例如,h1:defined
将始终与标准的内置 <h1>
元素匹配。 如果我们的 <pizza-pie>
元素尚未出现在 HTML 中,因为它正在等待 JavaScript 或根据设计在稍后时间注入 HTML,那么它不会被选中——至少在它最终加载之前不会被选中。
您可能会问,这有什么用? 通过这种方式,我们可以根据自定义元素的已定义状态对其进行样式设置。 让我们来看一个示例,看看它是如何工作的。
示例
为了演示如何使用 :defined
CSS 选择器,让我们以 two-up Web Components 为例。 此组件比较两个 DOM 元素,例如两张图片。 但是,假设用户在互联网连接速度慢的情况下加载页面。 在这种情况下,自定义元素的 JavaScript 和 CSS 可能需要一段时间才能加载,并导致该元素在页面加载完成之前看起来损坏,例如两张图片上下叠放而不是并排放置。
没有人想要这种不流畅的体验,这就是 :defined
的设计目的。 使用它允许我们在自定义元素完全加载之前将其隐藏,从而防止在自定义元素的 JavaScript 加载过程中可能发生的卡顿。
two-up:not(:defined) {
visibility: hidden
}
two-up:defined {
visibility: visible
}
在上面的代码中,我们使用 :defined
选择器将自定义元素的可见性设置为在完全定义后可见。 请注意,我们是如何能够通过将选择器与 :not()
函数组合来将元素的 visibility
设置为 hidden
的。 通过这样做,我们是在说:“如果 <two-up>
组件未定义,那么请将其隐藏。”
当我们这样做时,即使在互联网连接速度慢的用户也可以在页面加载时享受流畅、无卡顿的体验。 此策略还可以为您提供性能优势,因为 累积布局偏移(或 CLS)是用于核心 Web 指标的指标,会影响搜索排名。 页面加载时的偏移量越少,CLS 越好。
观看以下视频以查看结果。 此外,请注意 :defined
选择器如何在已定义和未定义状态下应用于 two-up Web Components。
浏览器支持
支持在整个领域都非常棒。
更多信息
- CSS 选择器级别 4 规范 (W3C)
- Web Components API (MDN)