My HTML Web Component boilerplate for 2026
5 months ago
- #javascript
- #web components
- #boilerplate
- 在`connectedCallback()`方法而非`constructor()`中实例化Web组件，以避免移动或替换组件时出错。
- 在实例化组件前检查`document.readyState`，使用`init()`方法进行实际实例化以确保DOM已准备就绪。
- 使用带有JSDoc类型定义的私有实例属性和方法，增强封装性和可维护性。
- 利用`handleEvent()`方法处理事件，简化对实例属性的访问并避免清理问题。
- 使用`handleEvent()`时无需在`disconnectedCallback()`中进行不必要的事件清理，浏览器会处理垃圾回收。
- 仅在`disconnectedCallback()`中移除附加到自定义元素外部元素的事件监听器。
- 拒绝使用Shadow DOM，认为它是一种反模式，会使Web组件的使用复杂化。