:defined

Avatar of Mojtaba Seyedi
Mojtaba Seyedi

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。

浏览器支持

支持在整个领域都非常棒。

更多信息