Components

SSE's page routing model allows us to cleanly separate page-specific code in a very manageable way. But in some cases your code needs to be tied to a "component" rather than a page or path.

Component is a significant term in Webflow, but SSE "components" aren't strictly tied to Webflow Components. We'll be discussing both here- to distinguish...

• "Components" ( capitalized ) will refer to Webflow Components.

• "components" ( lowercase ) will refer to SSE components.

These are some examples of "components" that might use code;

• A specially configured SwiperJS setup

• A custom component you've built such as an accordion

• Specialized form validation

• A fancy multi-step form

• A cool color-picker

• Also, any Webflow Component that needs code attached to its functionality

Often, these "components" need to be reused on multiple pages, and your design team might for example duplicate a quiz or a contact form to another page at any time- ideally the dev team would not need to do anything for that component to automatically work on that new page.

Goals

• Efficient code execution, only run code when it's needed

• Code isolation, e.g. the code & CSS for a multi-step form should be distinct from the rest of your source ode

• Reusability. Your development would should be easy to repurpose on other projects you build.

• Webflow Component support. Take full advantage of the Webflow Team's work on components and leverage it in every way possible to maximize the finished "smart" component.

• Create a design paradigm that supports the possibility of multiple "component" instances per page.

Implementation

Our early experiments involve the use of a new custom attribute;

sse-component = ( component name ).

You apply this to the outer DIV of any "component" on your page, and SSE's router automatically knows to instantiate that named component, and pass it the element. From there, it's up to the component code to decide what it wants to do, focusing within that element.

Matching the component name to the component is currently done with a lookup table, however check future notes for some other ideas we're exploring.