时代变了，该使用原生popover属性模拟下拉了
内容提要
这篇文章介绍了使用popover属性实现下拉列表的方法。通过点击按钮，可以显示下拉元素，点击空白处则隐藏下拉列表。使用popover属性可以简化代码，并且实现层级顶级效果。文章还提供了一个案例演示，展示了如何使用popover属性模拟下拉框效果。最后，文章指出popover属性已经得到现代浏览器的支持，并且预测将来会得到广泛应用。
延伸解读
popover 如何简化下拉实现
传统下拉列表需要 JavaScript 控制显示隐藏、绝对定位和层级设置，代码量较大。而使用 popover 属性后，点击按钮即可显示下拉元素，点击空白处自动隐藏，无需额外 JS 处理显示隐藏和层级。文章示例中，仅需少量 JS 计算定位和更新按钮文字，其余交互由浏览器原生完成，显著减少了代码复杂度。
top-layer 带来的层级优势
popover 元素会进入浏览器的 top-layer，即层级顶级，页面中任何元素都无法覆盖，即使设置很高的 z-index 也无效。多个 top-layer 元素同时存在时，后显示的会覆盖先显示的，符合真实交互需求。这一特性使得下拉面板无需担心被其他元素遮挡，简化了层级管理。
模拟 select 的实践要点
文章演示了用 popover 模拟 select 下拉框：按钮触发 popover，下拉菜单使用 menu 元素，内部用 radio 单选框模拟选项以保留表单特性。JS 仅需在按钮点击时计算下拉位置和宽度，并在选项点击时隐藏 popover 并更新按钮文字。这种方案代码极简，且利用原生行为处理显示隐藏和层级。
浏览器支持与适用性
popover 属性目前已得到所有现代浏览器支持，文章预测未来将大规模应用。对于需要下拉交互的场景，使用 popover 可以减少 JS 代码并避免层级问题。但需注意，文章未提及旧版浏览器兼容方案，实际使用时需根据目标用户环境评估。
Q&A
原生popover属性怎么实现下拉列表？
通过给按钮添加popovertarget属性指向一个带有popover属性的元素（如下拉菜单），点击按钮即可显示该元素，点击页面空白处自动隐藏。无需JavaScript控制显示隐藏和层级。
用popover做下拉菜单有什么好处？
主要有两个好处：一是代码极简，无需JS控制显示隐藏和层级；二是层级顶级（top-layer），元素显示时页面中任何元素都无法覆盖，即使z-index设置很大。
popover的层级顶级是什么意思？
层级顶级（top-layer）是Web中专有的概念，元素显示时处于最顶层，页面中任何元素都无法覆盖，哪怕z-index设置为999999。多个顶级元素按后来居上原则叠放。
用popover模拟select下拉框需要写多少JS？
只需要少量JS：在按钮点击时计算下拉框位置（top、left、width），并在下拉框内点击选项时调用hidePopover()隐藏并更新按钮文字。显示隐藏和层级由popover自动处理。
popover属性现在浏览器支持情况如何？
目前所有现代浏览器都已支持popover属性，文章预测在不久的将来会大规模应用。
popover实现下拉时怎么定位到按钮下方？
默认浏览器居中定位，需要JS在显示时计算位置：获取按钮的getBoundingClientRect()，设置下拉元素的top为按钮底部加滚动偏移，left为按钮左侧加滚动偏移，width为按钮宽度。
