如何用纯HTML设置原生HTML Popover的初始打开状态？

问题描述 #

我对全新的原生popover属性十分期待，但测试时遇到一个问题：如何不借助JavaScript，仅用纯HTML设置popover的初始打开状态？

我的测试场景是实现一个无干扰的可切换Cookie横幅，希望根据服务器返回的Cookie接受状态，让它初始处于打开状态，且全程不使用JavaScript。

测试用示例代码如下：

<button popovertarget="mypopover">Toggle popover</button>
<div popover="manual" id="mypopover">
  <p>How to set this initially open?</p>
  <button popovertarget="mypopover">Close popover</button>
</div>

解决方案 #

只需给popover元素添加**open布尔属性**，即可让它在页面加载时默认处于打开状态，完全不需要JavaScript。

修改后的代码如下：

<button popovertarget="mypopover">Toggle popover</button>
<div popover="manual" id="mypopover" open>
  <p>Now this is initially open!</p>
  <button popovertarget="mypopover">Close popover</button>
</div>

补充说明 #

• open是原生popover的内置布尔属性，添加后popover默认显示，移除则默认隐藏。
• 该属性符合HTML规范，支持当前兼容原生popover的浏览器。
• 针对Cookie横幅场景，服务器可根据用户的Cookie状态，动态决定是否在popover元素上输出open属性，以此控制初始显示状态。

内容的提问来源于stack exchange，提问作者Mikko Tapionlinna