前端技术文章
-
TypeScript 中，外部输入优先使用 unknown 并通过类型守卫收窄；any 只适合被限制在遗留适配层。本文从接口响应、运行时风险和渐进迁移三个角度说明怎样选择。230 收藏 -
用一个原生 HTML dialog 表单说明 showModal、close、returnValue 与 cancel 事件的关系，给出提交、取消和重复打开时的可靠状态处理方式。229 收藏 -
用 Temporal 区分同一时刻换区、当地日历加日和实际时长，结合预约示例处理夏令时歧义，并说明接口存储与兼容层选择。228 收藏 -
文章 · 前端 | 1个月前 | html · 前端 · javascript · slot Web Components 服务端渲染 Declarative Shadow DOM shadowrootmode Shadow Root
服务端把 template shadowrootmode=open 作为宿主的直接子节点输出，浏览器解析 HTML 时即可建立 Shadow Root；客户端升级组件时复用已有根，只补事件和状态，而不是再次创建内部结构。227 收藏 -
前端状态更新频繁时，批处理负责合并同一调度窗口的重复提交，去抖负责等待连续输入停止后再执行副作用。本文用原生 JavaScript 拆开两者的触发边界，并给出输入、请求、状态和绘制的组合方案。227 收藏 -
CSS nesting 可以把组件的基础样式、子元素样式和状态样式放在同一规则中。本文用最小 CSS 示例说明默认后代关系、& 显式父选择器、组合器、媒体查询、特异性和扁平回滚写法。227 收藏 -
文章 · 前端 | 2个月前 | 前端 · css · display @starting-style popover CSS transition-behavior overlay top-layer
Popover 打开时能淡入，关闭时却瞬间消失，通常不是 opacity 写错，而是 display 和 overlay 提前切换。本文用最小示例说明 @starting-style、transition-behavior: allow-discrete、display 与 overlay 如何共同保住离场动画，并给出兼容降级边界。225 收藏 -
Popover API 无需手写 document 点击监听：给浮层设置 popover=auto，并用 popovertarget 按钮控制，浏览器会在点击外部或按 Esc 时执行 Light Dismiss。本文同时说明 manual 模式、菜单项关闭和事件同步边界。225 收藏 -
从 label、原生约束和 aria-describedby 入手，把表单错误总览、字段状态与键盘焦点连起来，并说明客户端校验与服务端校验的边界。225 收藏 -
CSS 自定义属性默认按离散值处理，直接做颜色或数值动画时常常没有中间帧。本文用 @property 声明 syntax、inherits 和 initial-value，让 --progress 与 --accent 获得可插值的动画能力。224 收藏 -
用 AbortSignal.timeout 为 fetch 设置可解释的超时边界，区分 TimeoutError、AbortError 与网络错误，并处理响应体读取阶段的取消和兼容降级。223 收藏 -
文章 · 前端 | 1个月前 | 前端 · javascript · SyntaxError Web Components customElements.whenDefined Custom Elements 自定义元素名称
customElements.whenDefined 传入无效标签名时会直接抛出 SyntaxError，而不是返回等待中的 Promise。本文区分名称契约与注册时序，给出前置处理、统一注册名和批量等待的实用写法。223 收藏 -
首次插入 DOM 或从 display:none 变为可见时，CSS transition 常常没有可用的起点。本文用 @starting-style 还原这个症状，给出独立与嵌套写法，并说明层叠顺序、allow-discrete、降级和 prefers-reduced-motion 的边界。223 收藏 -
弹窗锁定页面滚动时，经典滚动条消失会改变内容区宽度。本文用 scrollbar-gutter: stable 固定滚动条槽位，并说明嵌套滚动容器、both-edges 与旧环境 JavaScript 补偿的边界。223 收藏 -
Service Worker 更新失败通常不是简单清空浏览器缓存，而是脚本版本、install 预缓存、waiting 状态和 fetch 策略没有对齐。本文用一个稳定的 sw.js 与版本化缓存示例，说明如何配置更新、控制接管时机，并用 DevTools 定位旧页面来源。222 收藏