UI5 Web Components 2.0 中的 Popover API

在早期版本的 UI5 Web Components 中，存在一个名为“静态区域”（<ui5-staticarea>）的 DOM 元素，它直接位于 HTML 文档的 <body> 中。所有组件的弹出窗口都放置在这个静态区域中。这种设计确保了即使 HTML 文档应用了诸如 overflow: hidden、transform 或类似的 CSS 规则，或者组件处于堆叠上下文中，其弹出窗口仍然能够正确定位。

v1.24 中的 UI5 日期选择器 DOM 结构

在 UI5 Web Components v1.24 版本中，“ui5 日期选择器”组件的 DOM 结构如下：

组件的物理结构被分为两部分：
- 包含日期选择输入框的“主要部分”（即 ui5-datepicker 标签本身）。
- 弹出窗口部分被放置在静态区域中。

这种设计虽然解决了定位问题，但增加了开发和维护的复杂性。

v2.0 中的 UI5 日期选择器 DOM 结构

在 v2.0 版本中，UI5 日期选择器的 DOM 结构得到了显著优化：

组件的输入框和弹出窗口都被整合到 ui5-datepicker 本身内部。
不再需要依赖“静态区域”，因为浏览器的 Popover API 现在能够确保弹出窗口的正确定位。

这种改进带来了以下优势：

更易于开发和维护：组件的结构更加直观，减少了复杂性。
增强的 CSS 支持：开发者可以为弹出窗口部分提供 CSS 阴影样式，而不仅仅是组件的主要部分。此外，设置在组件上的 CSS 自定义属性也会对弹出窗口部分生效。

以下是一个示例：

由于 Popover 现在是组件的一部分，开发者可以为 Popover 内的元素提供额外的 CSS 样式支持。

带有弹出窗口的 Web 组件的限制

需要注意的是，带有弹出窗口的 Web 组件存在一个硬性限制：无法将子项直接插入弹出窗口中。

v1.24 中的 UI5 Select DOM 结构

在 v1.24 版本中，“ui5-select”组件的 DOM 结构如下：

由于弹出窗口依赖静态区域，ui5-option 组件无法直接插入到 ui5-list 中，因为它们位于 DOM 的不同部分。
开发者只能提供逻辑上的 ui5-option 组件，并将其文本内容用于静态区域中列表项（ui5-li）的 text 属性。

v2.0 中的 UI5 Select DOM 结构

在 v2.0 版本中，“ui5-select”组件的 DOM 结构得到了改进：

弹出窗口成为 ui5-select 组件的一部分。
开发者可以直接将物理上的 ui5-option 组件插入到弹出窗口或其子窗口（如 ui5-list）中。

这种改进带来了以下优势：

支持自定义用户内容：开发者可以为过去具有严格预定义 API 的组件提供更多的自定义内容支持。
简化测试：测试人员不再需要了解如何找到与组件关联的静态区域项，因为所有内容都直接位于组件的影子 DOM 中。
浏览器原生支持：使用浏览器的 Popover API，框架无需再自行处理 z-index 等问题。浏览器会自动确保最后打开的弹出窗口始终位于顶部。

浏览器支持情况

目前，所有主流浏览器（包括 Chrome、Safari、Edge，以及从 125 版起的 Firefox）都已完全支持 Popover API。随着 v2.0 的正式发布，我们预计每个主要浏览器都将发布至少 3 个稳定版本来支持这一功能。

总结

UI5 Web Components 2.0 中对 Popover API 的引入，显著提升了组件的开发体验和维护效率。通过将弹出窗口整合到组件本身，开发者不仅能够更轻松地管理组件的 DOM 结构，还能享受到更强大的 CSS 自定义能力。此外，浏览器原生支持的 Popover API 进一步简化了框架的实现逻辑，确保了弹出窗口的正确定位和显示效果。

请持续关注我们的博客，了解 UI5 Web Components 2.0 的正式发布日期及更多相关信息！

原文链接: https://sap.github.io/ui5-webcomponents/blog/releases/popover-api-in-v2/

UI5 Web Components 2.0 中的 Popover API - SAP