我做了快三年前端，平时写页面基本是 Vue 加组件库，遇到弹窗、折叠、下拉这些交互，第一反应永远是去翻组件文档，或者干脆让 AI 帮我生成一段。直到上周有个小需求，要我手写一个不依赖框架的纯静态弹窗，我盯着屏幕居然愣了几秒。那一刻我有点慌，倒不是完全不会，是发现自己好像很久没真正"手写"过这些最基础的东西了。
一个让我有点慌的瞬间
事情是这样的。运营同学要一个活动用的落地页，就一个简单的弹窗加一段可折叠的说明，要求越快越好。我们项目本身是 Vue，但这次是纯静态页，我就想着顺手写。结果我下意识打开了组件库，又想了想静态页用不了，于是很自然地把需求丢给了 AI。AI 很快给了代码，一个 position: fixed 配 z-index，再接一段控制显示隐藏的 JS。能用，但我心里空落落的，因为我没真懂它，只是让它"跑起来了"。
后来我闲下来复盘，才开始认真想一个问题：这些最基础的交互，浏览器原生是不是早就支持了？我是不是把太多本该属于自己的基本功，悄悄交给了工具代劳？
dialog 和 popover，原来早就够了
我第一个去查的是弹窗。我们一直用组件库的 Modal，其实 HTML 自己有个 dialog 元素，调用 showModal() 之后，遮罩、焦点管理、按 Esc 关闭这些浏览器都替你处理好了。我之前居然一次都没在生产里用过它，总觉得"原生的不够好看、不够灵活"。
比 dialog 更让我意外的是 Popover API。给一个元素加上 popover="auto"，再让按钮带上 popovertarget，点一下就弹出，点外面或者按 Esc 自动收起，一行 JS 都不用写。下拉菜单、提示气泡、侧边面板都能这么玩。CSS 里还有个 Anchor Positioning，可以让弹层稳稳贴着触发按钮，不用再去手动算坐标。我试了下，确实比自己堆 fixed 加监听省心太多。
还有个新东西叫 command 和 commandfor 属性，Chrome 135 之后才开始支持。简单说，普通按钮可以直接指挥弹窗或对话框开关，连 Popover API 那点绑定都省了。不过这个目前浏览器支持还窄，我自己的项目暂时没敢上，怕同事的 Firefox 直接白屏。
details 的 name 属性能干掉我的折叠组件
折叠面板我以前也是组件库一把梭。后来发现 details 和 summary 两个标签就能撑起手风琴，而且它天生带无障碍支持，屏幕阅读器会读展开收起的状态。
真正让我拍大腿的是 name 属性。给一组 details 加上相同的 name，它们就变成互斥的：打开一个，其他的自动关上。我不就一直想要这种"同时只展开一个"的效果吗？以前还得写 JS 去手动关掉兄弟节点，现在浏览器一句话搞定。
顺手还知道了 datalist，输入框配上它就有自动补全的下拉，用户照样能自己打字。这种小东西单看不起眼，凑多了，一个页面能少引不少依赖，打包体积也能小一圈。
我拿一个小组件试了试
光看文档不过瘾，我把运营那个落地页真的用原生方式重写了一遍。弹窗用 dialog，确认按钮里写 popovertarget 指向它；折叠说明换成 details 加 name。写完我盯着预览看了好一会儿，没有任何 JS 文件，交互却全活了。那种感觉很难形容，有点像把借来的东西还回去，发现自己本来就有。
当然也不是全无坑。我本想给弹窗加个淡入动画，原生 dialog 的 ::backdrop 配合 @starting-style 能做，但 Safari 老版本支持参差，最后我妥协成了简单的透明度切换。还有 command 那套太新，我只在自己的小玩具页里玩了玩，没敢往正经项目放。现实里我还是会按兼容性来取舍，不会为了"纯原生"硬刚需求。
我不是在反对 AI，是在找回手感
写到这估计有人会想，你这不是劝大家别用 AI 吗。真不是。我自己天天用 Cursor 和 Claude，离不开。让我慌的不是工具，是我发现自己越来越"快"，却越来越不"懂"。代码生成得快，我连读都没认真读就合进去了，出了 bug 反而比手写时更懵，因为逻辑根本不是我想清楚的。
原生 HTML 这些能力给我的，是一种久违的踏实感。它们就长在浏览器里，不依赖某个组件库的版本，不会因为作者哪天不维护了就炸。重新去摸这些基础，我觉得自己像是在找回写代码的手感，而不是永远当个把需求翻译给 AI 的中介。
我甚至开始怀疑，是不是该把 AI 当"第二双眼睛"，而不是"第一只手"。遇到不熟的东西先自己想一遍原生的做法，实在搞不定再问它。这样至少我是在学，不是在搬运。
写在后面
我目前还是个在标准边缘试探的新手，上面说的浏览器支持情况也可能因为我记混而出错，欢迎懂的同学在评论区拍我。
说真的，我也挺想找几个同样在 AI 时代有点迷茫、又不想把基本功全交出去的前端朋友聊聊天。如果你也有那种"代码越写越快，心里越没底"的感觉，咱们评论区见。
