Building optimistic UI in Rails (and learn custom elements)
5 months ago
- #javascript
- #rails
- #web-components
- 自定义元素允许通过JavaScript定义具有行为的HTML标签，类似Hotwire的<turbo-frame>和<turbo-stream>
- 自定义元素是Web Components的一部分，与Shadow DOM和模板并列，但可以独立使用
- 创建自定义元素需定义继承HTMLElement的类，通过customElements.define()注册，然后在HTML中使用新标签
- connectedCallback和disconnectedCallback等生命周期回调与Stimulus的connect/disconnect方法对应
- 通过attributeChangedCallback和observedAttributes可实现属性变化的响应式处理
- is属性可扩展内置元素，但Safari不支持，因此更推荐使用自主型自定义元素
- 与Stimulus相比，自定义元素在生命周期处理、元素选择、状态管理和事件处理上更接近原生JavaScript方式
- 简单的计数器示例演示点击增值功能，展示自定义元素基础用法
- 乐观表单示例在提交时立即更新UI，若服务器失败则回滚，提升用户体验
- 自定义元素具有可复用性，可在应用任意位置使用，并能与Rails和Turbo Streams无缝集成