HTML dialog元素新支持了closedBy属性
内容提要
<dialog>元素的closedBy属性允许通过点击半透明蒙层关闭弹框，简化了之前需要JavaScript实现的功能。该属性有三个值：any、closerequest和none，分别对应不同的关闭方式。目前Safari不支持该属性，可通过Polyfill解决。
关键要点
-
<dialog>元素的closedBy属性允许通过点击半透明蒙层关闭弹框，简化了之前需要JavaScript实现的功能。
-
closedBy属性有三个值：any、closerequest和none，分别对应不同的关闭方式。
-
如果未设置closedBy属性，浏览器会默认处理为auto，使用showModal()时等同于closerequest，使用show()时等同于none。
-
目前Safari浏览器不支持closedBy属性，可以通过Polyfill解决兼容性问题。
延伸解读
closedBy属性的实用性
closedBy属性的引入大大简化了弹框的关闭操作，开发者无需再依赖JavaScript来实现这一功能。通过设置不同的值，开发者可以灵活控制弹框的关闭方式，提升用户体验。
Safari浏览器的兼容性问题
目前Safari浏览器尚不支持closedBy属性，这可能影响使用该属性的项目在不同浏览器中的一致性表现。开发者应考虑使用Polyfill来解决兼容性问题，以确保功能在所有主流浏览器中正常运行。
属性值的选择与影响
closedBy属性的三个值（any、closerequest、none）各有不同的关闭行为。开发者在选择时需考虑用户交互的需求，确保弹框的关闭方式符合预期，避免影响用户体验。
延伸问答
<dialog>元素的closedBy属性有什么作用？
closedBy属性允许通过点击半透明蒙层关闭弹框，简化了之前需要JavaScript实现的功能。
closedBy属性支持哪些值？
closedBy属性有三个值：any、closerequest和none，分别对应不同的关闭方式。
如果不设置closedBy属性，浏览器会如何处理？
如果未设置closedBy属性，浏览器会默认处理为auto，使用showModal()时等同于closerequest，使用show()时等同于none。
Safari浏览器是否支持closedBy属性？
目前Safari浏览器不支持closedBy属性，可以通过Polyfill解决兼容性问题。
如何在项目中使用closedBy属性的Polyfill？
可以引入Polyfill，通过import语句导入并使用apply()方法来解决兼容性问题。
closedBy属性的any、closerequest和none分别代表什么？
any表示全部允许关闭，closerequest表示需要请求关闭，none表示禁止自动关闭。
