前端技术文章
-
闭合阴影根不必牺牲焦点委托。用声明式模板保留 delegatesFocus，区分宿主聚焦、Tab 顺序与外部观察，并避开布尔属性、重复建根和字符串注入的常见误区。120 收藏 -
服务端输出 Declarative Shadow DOM 后，自定义元素仍可能保持未知 HTMLElement 状态。本文从解析时序、CustomElementRegistry 一致性和升级观测三个指标入手，给出可复用的定位代码与修复结构，帮助 SSR 组件稳定触发 constructor 和 connectedCallback。387 收藏 -
富文本预览常见的换行消失、连续空格变成一个空格，可以在展示层用 white-space-collapse: preserve-breaks 保留换行并压缩空白，再用 pre-line 作为兼容回退。308 收藏 -
CSS white-space-collapse: preserve-spaces 会保留连续空白，制表符和换行段则转为空格，因此文本占用宽度和换行机会都可能改变。本文用最小示例拆解它与其他取值的差异，并给出排查宽度异常的选择方法。222 收藏 -
区分标准 mask-composite 与 WebKit 旧合成语法，说明层列表、运算方向与简写重置，并提供两层 exclude 示例和限定范围的 xor 回退。103 收藏 -
用两层 mask 和 mask-composite: exclude 做出渐变镂空边框，拆清遮罩层、组合关系、尺寸位置与圆角对齐，解决边框变实心或内容被裁掉的问题。253 收藏 -
CSS :has 不支持时，先用普通类名、属性和结构写完整基础样式，再用 @supports selector(:has(*)) 叠加父级增强；本文说明直接子代边界、:where() 优先级和状态同步方案。158 收藏 -
解释 CSS :has() 与 :is() 组合时参数选择器如何参与优先级计算，说明为什么后写的规则仍可能失效，并给出用 :where()、拆分选择器和级联层恢复可维护覆盖关系的方法。474 收藏 -
用 CSS :has(> ...) 让卡片只响应直接子元素的状态，理解后代匹配与直接子代匹配的差异，并处理多个状态、优先级和组件边界。111 收藏 -
用 Vue 组合式函数封装 AbortController、请求序号和 onUnmounted 清理，处理重复请求、旧响应回写、组件卸载与 SSR 边界。335 收藏 -
搜索框输入流畅而结果列表很重时，可以用 React useDeferredValue 把非关键结果渲染降为可中断的后台更新，再配合 memo、过期状态和请求策略处理真实边界。320 收藏 -
用 Vite mode 管理 development、staging、production 环境变量文件，说明 .env 覆盖关系、VITE_ 客户端边界，以及在 vite.config.js 中使用 loadEnv 的配置方法。329 收藏 -
TypeScript NoInfer 用于拆分泛型推断与参数约束，本文通过数组、默认值和配置对象示例说明如何保持调用方的显式类型选择，并列出版本与回归边界。443 收藏 -
Import Maps 可以把浏览器模块中的相对路径统一成稳定别名。本文从 imports、路径前缀、scopes 和加载顺序入手，给出可迁移的 HTML 示例与回归清单。486 收藏 -
Background Sync 适合把离线表单的发送时机交给 Service Worker，但它不是本地存储。本文用 IndexedDB outbox、唯一同步标签和失败保留策略，整理一套可回退的延迟提交方案。463 收藏