长话短说
我想挑战自己构建一个自定义下拉组件，该组件可与 HTML 表单配合使用，并且在所有平台和浏览器上看起来都相同。我终于成功制作了一个，这是如何...
代码
代码可以在这支代码笔上找到。
它是如何完成的
- 创建一个扩展 HTML 元素的本机 Web 组件。
- 赋予它拥有多个主题的能力（使用 CSS 中预定义的颜色）。
- 允许使用 setAttribute 或通过触发其中包含项目的事件来设置其项目。
- 监听指示何时选择项目的自定义事件。
- 让它能够成为任何 HTML 表单的一部分。请注意，在撰写本文时，需要 element-internals-polyfill 才能在某些浏览器（例如 Safari）上运行。
下拉组件的UI
它由三个元素组成。
- 显示当前所选项目的只读输入元素。
- 一个（最初隐藏的）div，其中包含下拉菜单中的项目。
- 指示下拉菜单状态（打开或关闭）的图标。请注意，使用的 svg 改编自 Bootstrap 图标。
业务逻辑
- 连接后，在其选定的主题中显示组件。如果没有选择，请选择默认的。
- 注册以声明方式创建组件时传递的下拉列表和项目选择事件。
- 触发下拉事件后，捕获项目并将它们添加到列表中。
- 提供以编程方式设置所选项目的能力。当服务提供商预先知道当前选择的项目时，这特别有用。例如，预订网站中的位置列表，理想情况下应该显示用户当前居住的城市。
看起来怎么样
结论
我们使用浏览器可用的工具创建了一个现代的可定制下拉组件，它在任何地方看起来都一样。如果您有任何补充或疑问，请随时告诉我。
祝您开发愉快！
以上是现代下拉组件 HTML的详细内容。更多信息请关注PHP中文网其他相关文章！
