> 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/cc/technical-notes.md).

# Technical Notes

Code components have strengths and weaknesses that make the well suited for a specific use cases.  The more you understand the design of code components, the more effectively you can apply them. 

## Critical Concepts 

See Webflow's [Component architecture](https://developers.webflow.com/code-components/component-architecture) guide to understand the structure. 

<img src="/files/Ix31fZZ4SXPDzfMMhVdS" alt="" class="gitbook-drawing">

In Chrome DevTools, you'll see a component as...&#x20;

```html
<code-island> 
   #shadow-root
      ... react HTML ... 
   <div slot="slot">
      ... slotted content ... 
   </div>
</code-island> 
```

### Light DOM, and Shadow DOM&#x20;

* Light DOM is you page's regular DOM which you are used to working with.  Your Webflow page CSS applies here, and scripts can freely locate and manipulate your DOM elements.&#x20;
* Shadow DOM is an isolated piece within the Light DOM, that acts as a boundary.&#x20;
  * Styling&#x20;
    * Light DOM CSS classes and styles do not directly penetrate into the Shadow DOM&#x20;
    * Shadow DOM CSS classes and styles cannot affect the Light DOM&#x20;
    * However styles can inherit across the boundary&#x20;
    * Variables can penetrate&#x20;
    * JS is restricted ( expand on this )&#x20;

### Slot architecture&#x20;

Webflow's code components project slots *outside* of the shadow DOM, into the light DOM. &#x20;

* Native components can be slotted&#x20;
* Classes can be used to style these components&#x20;
* ? Slot content is always projected during SSR&#x20;

| Advantages                                                                                                | Disadvantages                                                                                                                                                                                                                                                                                                                                                                       |
| --------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <ul><li>Native components can be slotted </li><li>Classes can be used to style these components</li></ul> | <ul><li>React cannot see the slotted content </li><li>You must work around this by projecting scripts into the light DOM to access and manipulate that content </li></ul><p>Use cases;</p><ul><li>Use cases like FAQPage JSON-LD are very problematic here because the slotted content will be FAQs, but it's impossible to access and aggregate the JSON-LD during SSR. </li></ul> |
|                                                                                                           |                                                                                                                                                                                                                                                                                                                                                                                     |

### SSR v. CSR&#x20;

<https://developers.webflow.com/code-components/component-architecture#server-side-rendering-ssr>

&#x20;&#x20;

## Component Design Patterns

This structure means that your component design must consider your goals;&#x20;

### Sygnal's Approaches&#x20;

* Standard.  Develop your component normally, as the framework is designed for.  Your entire component is inside the #shadow-root . Any slotted content is outside of that shadow root, in the light DOM.  Your component's React code doesn't interact directly with slotted content.&#x20;
* Script.  The component is a carrier for script&#x20;
  * Generate a unique ID within the shadow root for your component&#x20;
  * Generate a script and install it page-wide, which can then locate that component, and its code island container.&#x20;
  * From there, locate the Slot(s) and their content in the light DOM&#x20;
* Hybrid.&#x20;

<table><thead><tr><th width="111.6666259765625"></th><th>Tradeoffs</th><th>Use cases</th></tr></thead><tbody><tr><td>Standard</td><td><ul><li>Can only work inside the shadow-root</li><li>Strong styling limitations; project classes cannot impact it directly ( except through inheritance ) </li></ul></td><td><ul><li>Image-only masonry layout</li><li>Media components, such as audio,  video, Rive, Spline, and others </li><li>DataTable components </li></ul></td></tr><tr><td>Script</td><td>Effectively CSR-only for any work happening outside of the shadow root. </td><td><ul><li>CMS slider.  Needs to construct the slider around the slides, which are in the slot. </li><li>FAQPage JSON-LD, which needs </li><li>Masonry layout</li></ul></td></tr><tr><td>Hybrid</td><td></td><td><ul><li>Image-only masonry layout.  Finds and imports slotted images inside of the shadow DOM. </li></ul></td></tr></tbody></table>

## Shared State&#x20;

Nanostores&#x20;