Native Components

Webflow.js Build Dependencies

CSS and JS note. Some elements such as a checkbox element won't publish the element's supporting CSS into the page unless the Webflow designer sees a native Webflow checkbox element in the page.

If we replace these completely, the publishing system loses the plot.

However, it's possible to workaround this by placing a native Webflow element on the page and then exclude it using Settings Visibility Hidden. In this situation, the HTML will not be published however the CSS and JS will be, This is because the Visibility property can be used in components and CMS-bound, which means the publishing system can't be certain whether the final page instance will need that CSS and JS.

It includes it to be safe.

In some cases, this unfortunately means a DIV wrapper

Checkbox e.g.; 

<div>
  custom element input ... checkbox 
  <div> visibility none to suppress publishing 
    webflow input, to trigger inclusion of CSS and JS

It's likely that a few elements like Collection Lists involve server-side rendering ( SSR ). These elements may not be especially customizable.

JavaScript-Powered Elements

Some elements require JS. Ideally we want this JS fully self-contained.

  • function() IIFE to isolate component data and code

  • script element relative DOM traversal to locate the component root element and manage code from there

Leveraging Component Properties

We want our elements to be maximally useful, so ideally we can make the best use of properties.

Using custom elements, our attributes can only be

As of 2025-Jun-17, a custom attribute can only be bound to a component attribute property. However that attribute property can be bound to;

  1. A parent component's attribute property

  2. These collection list field types

    1. Image ( URL )

    2. Link ( URL )

    3. Probably others

In certain cases this requires using script to extract content from e.g. a hidden image or link element when the component needs that data for specific purposes.

Code Components ( CC's ) change this approach significantly. Unlike the controlled-binding approach of NC's, CC's have a complete separation of property type and property utilization.

PreviousTechnical NotesNextCode Components

Last updated