My HTML Web Component boilerplate for 2026
4 months ago
- #javascript
- #web components
- #boilerplate
- Instantiate web components in the `connectedCallback()` method instead of the `constructor()` to avoid errors when moving or replacing components.
- Check `document.readyState` before instantiating components to ensure the DOM is ready, using an `init()` method for actual instantiation.
- Use private instance properties and methods with JSDoc for type definitions, enhancing encapsulation and maintainability.
- Leverage the `handleEvent()` method for event handling to simplify access to instance properties and avoid cleanup issues.
- Avoid unnecessary event cleanup in `disconnectedCallback()` when using `handleEvent()`, as the browser handles garbage collection.
- Only remove event listeners attached to elements outside the custom element in `disconnectedCallback()`.
- Reject the use of shadow DOM, considering it an anti-pattern that complicates web component usage.