webflow-module-creation

You mount JavaScript modules automatically by matching the filename in `src/modules/` to the target `data-module` attribute value and exporting a default function receiving `element` and `dataset` for per-element logic.

You manage component lifecycle and cleanup for dynamically navigated Webflow pages by integrating `onMount` and `onDestroy` hooks within the module's default export function, ensuring predictable setup and teardown for reused components.

The required file structure for adding custom JavaScript behavior to Webflow components places modules in the `src/modules/` directory, enforcing a consistent location and export signature so modules are maintainable and scalable.

No, you do not need to manually wire component bootstrapping for every Webflow page element. Automated module mounting initializes behavior based on matching DOM `data-module` attributes without manual setup.

The module function receives DOM data attributes in Webflow through the default export function signature `(element: HTMLElement, dataset: DOMStringMap)`, passing the element and its dataset directly to the logic.

If your module filename does not match the `data-module` attribute value in Webflow, the automated mounting mechanism will not initialize the component, as it requires exact filename matching to target the attribute value.