> 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/code-components/technical-notes/how-ccs-render.md).

# How CC's Render

## Integrating CC's 

### Standard Approach

Add a Code Component from the components panel. 

### Static Code Injection 

You can drop an embed with the code comonent HTML directly, and it will render. 

* The library must be installed 
* This does not adapt to lib updates and is fragile 
  * e.g. propertys have been added / removed 
* However it means you can theoretically put a CC inside of a CMS-stored richtext embed 
*

{% code overflow="wrap" %}

```html
<code-island data-loader="{&quot;tag&quot;:&quot;FEDERATION&quot;,&quot;val&quot;:{&quot;clientModuleUrl&quot;:&quot;https://cdn.prod.website-files.com/68d7852227b69a4a23618c87%2Fmodule%2Fwf-manifest.json&quot;,&quot;serverModuleUrl&quot;:&quot;https://cdn.prod.website-files.com/68d7852227b69a4a23618c87%2Fssr-module%2Fssr-bundle.tar&quot;,&quot;moduleId&quot;:&quot;_68d7852227b69a4a23618c87&quot;,&quot;submoduleId&quot;:&quot;JsonLdOrganization&quot;,&quot;exportPath&quot;:&quot;default&quot;}}" data-props="{&quot;name&quot;:&quot;Sygnal&quot;,&quot;url&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;,&quot;logo&quot;:&quot;&quot;,&quot;foundingDate&quot;:&quot;&quot;,&quot;founder&quot;:&quot;&quot;,&quot;numberOfEmployees&quot;:&quot;&quot;,&quot;industry&quot;:&quot;&quot;,&quot;legalName&quot;:&quot;&quot;,&quot;vatID&quot;:&quot;&quot;,&quot;taxID&quot;:&quot;&quot;,&quot;duns&quot;:&quot;&quot;,&quot;parentOrganization&quot;:&quot;&quot;,&quot;subOrganization&quot;:&quot;&quot;,&quot;sameAs&quot;:&quot;&quot;,&quot;telephone&quot;:&quot;&quot;,&quot;email&quot;:&quot;&quot;,&quot;faxNumber&quot;:&quot;&quot;,&quot;address&quot;:&quot;&quot;,&quot;city&quot;:&quot;&quot;,&quot;state&quot;:&quot;&quot;,&quot;postalCode&quot;:&quot;&quot;,&quot;country&quot;:&quot;&quot;,&quot;version&quot;:&quot;0.1.1&quot;,&quot;docs&quot;:&quot;https://components.sygnal.com/sygnal-webflow-components/seo&quot;}" data-slots="[]" data-hydrate="true" data-webflow-context="{&quot;mode&quot;:&quot;publish&quot;,&quot;interactive&quot;:true,&quot;locale&quot;:&quot;en&quot;}" data-interactive="true" style="display:contents"></code-island>
```

{% endcode %}

### Dynamic Code Injection&#x20;

The code-island construction can even be created dynamically with script;&#x20;

* This suggests a possible spec for creating CC's as embeds within richtext that is easily edited, and converted dynamically.&#x20;

```html
<script>
(function () {
  var el = document.createElement('code-island');
  el.setAttribute('data-loader','{"tag":"FEDERATION","val":{"clientModuleUrl":"https://cdn.prod.website-files.com/68d7852227b69a4a23618c87%2Fmodule%2Fwf-manifest.json","serverModuleUrl":"https://cdn.prod.website-files.com/68d7852227b69a4a23618c87%2Fssr-module%2Fssr-bundle.tar","moduleId":"_68d7852227b69a4a23618c87","submoduleId":"JsonLdOrganization","exportPath":"default"}}');
  el.setAttribute('data-props','{"name":"Sygnal","url":"","description":"","logo":"","foundingDate":"","founder":"","numberOfEmployees":"","industry":"","legalName":"","vatID":"","taxID":"","duns":"","parentOrganization":"","subOrganization":"","sameAs":"","telephone":"","email":"","faxNumber":"","address":"","city":"","state":"","postalCode":"","country":"","version":"0.1.1","docs":"https://components.sygnal.com/sygnal-webflow-components/seo"}');
  el.setAttribute('data-slots','[]');
  el.setAttribute('data-hydrate','true');
  el.setAttribute('data-webflow-context','{"mode":"publish","interactive":true,"locale":"en"}');
  el.setAttribute('data-interactive','true');
  el.style.display = 'contents';
  var s = document.currentScript;
  s.parentNode.insertBefore(el, s);
})();
</script>
```

## Thoughts&#x20;

* It appears that at least part of the hydration of CC's occurs after the DOM is loaded&#x20;
  * It's unclear what this means for SSR&#x20;
  *