前端技术文章
-
Alpine.js 修改响应式数据后如何等 DOM 更新？本文用回调式和 Promise 式 $nextTick 说明读取文本、测量尺寸、聚焦元素的正确时机，并划清请求完成与浏览器布局的边界。367 收藏 -
htmx 局部替换会让目标区域重新合并 HTML。本文说明怎样用稳定 ID 和 hx-preserve 保留指定元素，分析输入框、文件、iframe 与视频的边界，并给出替代布局和复查清单。241 收藏 -
htmx 的 hx-sync 可以协调字段校验、表单提交和实时搜索请求。本文用表单竞争场景说明 abort、drop、replace、queue 的差异，并给出提交优先、校验优先和只保留最后一次查询的写法。390 收藏 -
用Lit组件示例区分attribute命名、类型转换和property反射，说明camelCase默认映射、布尔attribute语义及对象属性入口，帮助组件作者为HTML和JavaScript调用方设计清晰接口。429 收藏 -
用 Promise.withResolvers 将一次事件转换为可 await 的结果，结合 AbortSignal 处理预先取消，并在成功、取消与注册异常时移除监听器，避免只用 once 或 race 留下订阅。327 收藏 -
文章 · 前端 | 4天前 | 前端 · javascript · SyntaxError Web Components customElements.whenDefined Custom Elements 自定义元素名称
customElements.whenDefined 传入无效标签名时会直接抛出 SyntaxError，而不是返回等待中的 Promise。本文区分名称契约与注册时序，给出前置处理、统一注册名和批量等待的实用写法。223 收藏 -
讲清 customElements.whenDefined 如何批量等待自定义元素注册完成，使用 Set 去重标签名、Promise.all 汇总等待，并处理空集合、路由切换和内部渲染边界。222 收藏 -
从首屏内容、渐进增强、脚本时序和兼容降级四个约束出发，比较 Declarative Shadow DOM 与客户端 attachShadow 的职责边界，并给出可复用的 Web Component 初始化写法。440 收藏 -
闭合阴影根不必牺牲焦点委托。用声明式模板保留 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 收藏