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 guide to understand the structure.

In Chrome DevTools, you'll see a component as...

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

Light DOM, and Shadow DOM

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

• Shadow DOM is an isolated piece within the Light DOM, that acts as a boundary.

  • Styling

    • Light DOM CSS classes and styles do not directly penetrate into the Shadow DOM

    • Shadow DOM CSS classes and styles cannot affect the Light DOM

    • However styles can inherit across the boundary

    • Variables can penetrate

    • JS is restricted ( expand on this )

Slot architecture

Webflow's code components project slots outside of the shadow DOM, into the light DOM.

• Native components can be slotted

• Classes can be used to style these components

• ? Slot content is always projected during SSR

Advantages	Disadvantages
Native components can be slotted Classes can be used to style these components	React cannot see the slotted content You must work around this by projecting scripts into the light DOM to access and manipulate that content Use cases; 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.

SSR v. CSR

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

Component Design Patterns

This structure means that your component design must consider your goals;

Sygnal's Approaches

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

• Script. The component is a carrier for script

  • Generate a unique ID within the shadow root for your component

  • Generate a script and install it page-wide, which can then locate that component, and its code island container.

  • From there, locate the Slot(s) and their content in the light DOM

• Hybrid.

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

Shared State

Nanostores