javascript-author

The best way to structure vanilla JavaScript for Web Components is using a functional core and imperative shell architecture. This pattern enforces maintainable code by separating pure logic from side effects, alongside specific naming conventions.

You document custom elements and events in vanilla JS using JSDoc annotations. This approach provides clear documentation for classes, methods, and events directly in your code without requiring external libraries or separate documentation files.

Yes, you can use dependency injection with vanilla JS custom elements. This architecture supports named exports and dependency injection, allowing you to build reusable and testable interactive UI elements like modal dialogs or dropdown menus.

Writing Web Components with this approach adheres to specific ESLint rules and naming conventions for variables, classes, custom elements, and events. These rules ensure your vanilla JavaScript remains modern, structured, and maintainable.

You should reconsider a functional core architecture if your project lacks support for named exports or modern vanilla JS workflows. This approach is tailored for maintainable custom elements and may be unnecessary for very simple, isolated scripts.