# 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;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sygnal.gitbook.io/sygnal-webflow-components/cc/technical-notes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.