> 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/nc/native-components-ncs/nc-design-approach.md).

# NC Design Approach

## Basic Recreation

1. Take a basic Webflow element 
2. Add it to a page and publish it
3. Disable JavaScript in the browser
4. Inspect the un-modified HTML 
5. Recreate that as a Component 
6. Use Custom Elements primarily, except where certain property-binding requires special property types;
   1. Use Links when Link properties are important
   2. Use Images when Image properties are important
   3. Consider Videos when Image properties are important

## Basic Initialization 

A few elements have specialized initialization that occurs at design-time.  For example- adding special classes to the initially selected tab. 

These are recreated using component-internal JS. 

{% hint style="success" %}
In this setup, the code is encapsulated as an IIFE and self-targets the component so each instance can run fully independently. 
{% endhint %}

## Extend the Component 

### Basic Extensions ( CC1 ) 

Basic extensions of the component involve exposing key HTML5 element properties that are useful. 

### Deeper Extensions ( CC2 )  

* Add common Finsweet Attributes 
  * e.g. FS Filter attributes on form inputs 
* Add common SA5 Attributes 
* Create specialized component variations for specific use cases 
  * e.g. Color-swatch radio button. 
  * e.g. Button with SVG icon 
  * e.g. Pseudo-disabled input, which appears and behaves as a disabled input element, but participates in form validation. 

## Design-Time UX

Some components have a design-time interface for specialized controls and component-specific settings.  Tabs, Sliders, and Lightboxes are good examples of this. 

Each is unique, and components do not currently offer a comparable feature, so we'll be doing some R\&D around the mechanics of this type of functionality.