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

Dynamic Code Injection

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

• This suggests a possible spec for creating CC's as embeds within richtext that is easily edited, and converted dynamically.

<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

• It appears that at least part of the hydration of CC's occurs after the DOM is loaded

  • It's unclear what this means for SSR