The .methods.js file is optional. It defines public methods that external code can call directly on the component element. Use methods for imperative operations like focusing an input or triggering a reset.

• Use named exports only
• Default exports are not supported
• Exported names become callable methods on the element

// element.focusInput() becomes available
export function focusInput(payload = {}) {
  const { selector = '#emailInput' } = payload;
  this.querySelector(selector)?.focus();
}

export function methodName(payload = {}) {
  // `this` is bound to the component element
}

Rules:

• No deps argument (unlike handlers)
• payload defaults to {}
• Payload must be an object when provided
• this is bound to the component element

Methods are invoked directly on the DOM element:

const element = document.querySelector('my-component');

// No payload
element.focusInput();

// With payload
element.focusInput({ selector: '#nameInput' });

// Invalid: primitive payload
element.focusInput('nameInput'); // throws

Methods can access:

• The DOM through this (the component element)
• Constants through this.constants

export function reset(payload = {}) {
  const eventName = payload.eventName || 'reset-requested';
  this.dispatchEvent(new CustomEvent(eventName, { bubbles: true }));
}

Public methods should be declared in .schema.yaml under methods. Method names in the schema must match the exported function names:

# .schema.yaml
methods:
  type: object
  properties:
    focusInput:
      description: "Focuses the primary input field"
      params: []
      returns: void
    reset:
      description: "Dispatches a reset event"
      params: []
      returns: void

export function focusInput(payload = {}) {
  const { selector = '#emailInput' } = payload;
  this.querySelector(selector)?.focus();
}

export function reset(payload = {}) {
  const eventName = payload.eventName || 'reset-requested';
  this.dispatchEvent(new CustomEvent(eventName, { bubbles: true }));
}