> For the complete documentation index, see [llms.txt](https://sygnal.gitbook.io/sygnal-webflow-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sygnal.gitbook.io/sygnal-webflow-components/technical-notes/native-components.md).

# Native Components

## Webflow\.js Build Dependencies 

{% hint style="warning" %}
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 
```

{% endhint %}

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

## JavaScript-Powered Elements &#x20;

Some elements require JS.  Ideally we want this JS fully self-contained.&#x20;

* `function()` IIFE to isolate component data and code&#x20;
* script element relative DOM traversal to locate the component root element and manage code from there &#x20;

## Leveraging Component Properties&#x20;

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

Using custom elements, our attributes can only be&#x20;

{% hint style="warning" %}
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&#x20;
2. These collection list field types&#x20;
   1. Image ( URL )&#x20;
   2. Link ( URL )&#x20;
   3. Probably others&#x20;
      {% endhint %}

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.&#x20;

{% hint style="success" %}
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.&#x20;
{% endhint %}