Write vanilla JavaScript for Web Components with functional core, imperative shell. Use when creating JavaScript files, building interactive components, or writing any client-side code.
Write modern vanilla JavaScript following functional core with imperative shell architecture.
| Principle | Description |
|---|---|
| Functional Core | Pure functions, getters, computed values - no side effects |
| Imperative Shell | DOM manipulation, event handlers, side effects in lifecycle hooks |
| Dependency Injection | Import templates, styles, i18n from separate files |
| Named Exports Only | No default exports - explicit named exports |
| JSDoc Documentation | Document classes, public methods, and events |
components/
└── my-component/
├── my-component.js # Main component class
├── my-component-template.js # Template function
├── my-component-styles.js # CSS-in-JS styles
└── my-component-i18n.js # Translations object
import { template } from './my-component-template.js';
import { styles } from './my-component-styles.js';
import { translations } from './my-component-i18n.js';
/**
* @class MyComponent
* @extends HTMLElement
* @description Brief description of component purpose
* @fires my-component-update - Fired when state changes
*/
class MyComponent extends HTMLElement {
static get observedAttributes() {
return ['lang', 'value'];
}
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
// FUNCTIONAL CORE - Pure getters
get lang() {
return this.getAttribute('lang') ||
this.closest('[lang]')?.getAttribute('lang') ||
document.documentElement.lang ||
'en';
}
get translations() {
return translations[this.lang] || translations.en;
}
// IMPERATIVE SHELL - Side effects
render() {
this.shadowRoot.innerHTML = `
<style>${styles}</style>
${template(this.translations)}
`;
}
connectedCallback() {
this.render();
// Set up observers and listeners
}
disconnectedCallback() {
// Clean up observers and listeners - REQUIRED
}
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue !== newValue) {
this.render();
}
}
}
customElements.define('my-component', MyComponent);
export { MyComponent };
| Rule | Requirement |
|---|---|
no-var | Use const or let only |
prefer-const | Use const when variable is never reassigned |
prefer-template | Use template literals for string concatenation |
eqeqeq | Use === and !== only |
camelcase | Use camelCase for variables and functions |
object-shorthand | Use { foo } not { foo: foo } |
| Named exports | No default exports |
| Context | Convention | Example |
|---|---|---|
| Variables/Functions | camelCase | handleClick, userName |
| Classes | PascalCase | MyComponent, UserService |
| Custom Elements | kebab-case | <my-component>, <user-card> |
| Events | kebab-case | 'user-updated', 'form-submit' |
| CSS Classes | kebab-case | .card-header, .nav-item |
When authoring JavaScript, consider invoking these related skills:
| Code Pattern | Invoke Skill | Why |
|---|---|---|
class X extends HTMLElement | custom-elements | Full Web Component lifecycle, slots, shadow DOM |
fetch() or API calls | api-client | Retry logic, error handling, caching patterns |
| Component state, reactivity | state-management | Observable patterns, undo/redo, sync strategies |
localStorage, IndexedDB | data-storage | Persistence patterns, offline-first |
| Error handling | error-handling | Error boundaries, global handlers, reporting |
If your JavaScript file defines a custom element (extends HTMLElement), also invoke:
If your code uses fetch() or makes network requests: