Working with Slotted Content

Webflow's implementation of React components appears to be tightly restricted, so that;

• Code component content can only be

<code-island ...>
  #shadow-root
    ... code-component can only access this SSR ... 
  <div slot="slot">
    ... slotted elements ...
  </div>
</code-island>

Limitations

• Code components can only access and manipulate the Shadow DOM which is inside the #shadow-root

• Slots exist outside of that root, which means

  • Slotted elements get the benefit of the website's CSS

  • The Code Component cannot see or manipulate slotted content

Workarounds

Currently, the only workaround we've found it to have the code component generate <script> that is injected into the page scope, which can find and

• Code component;

  • Generates a unique ID

  • Applies it to the <code-island> ?

Code Component Rendering Limitations regarding Slots

The slot content in Webflow components renders outside the shadow DOM as direct children of the <code-island> element. The React component itself runs inside the shadow DOM and cannot directly access or manipulate the slot content using refs or standard React DOM manipulation.

Considering this HTML:

<div slot="slot">
  <div class="w-dyn-list">...</div>
  <div class="w-dyn-list">...</div>
</div>

This <div slot="slot"> exists outside the React component's shadow DOM boundary. The React component can only render a <slot> element that references this content, but cannot directly manipulate it with useRef or query it with standard DOM methods.

The script approach is used because:

1. It runs in the global scope (outside shadow DOM)

2. It can access the actual slot content DOM nodes

3. It can find the specific code-island and manipulate its slot children

Can this be done server-side during SSR before it reaches the browser?

In Webflow's component system, the slot content is assembled by Webflow itself, not by our React component during SSR. By the time our component renders, the slot content structure is already determined by Webflow.

Slot contents aren’t available during SSR

In Webflow Code Components, each slotted child renders in its own Shadow DOM/React root; SSR only renders your component’s shell, then the browser projects the slotted content at hydration. Webflow Developers

Workable patterns:

1. Need server-side manipulation → don’t use a slot. Use a prop that serializes content (e.g., Text Node/Rich Text) so your React component receives a ReactNode on the server and you can transform it before returning HTML. Webflow Developers

Example (SSR-safe transform):

interface Props { content?: React.ReactNode; }
export function Wrapper({ content }: Props) {
  const transformed = React.Children.map(content, child => {
    if (React.isValidElement(child) && child.type === 'img') {
      return React.cloneElement(child, { loading: 'lazy', decoding: 'async' });
    }
    return child;
  });
  return <div>{transformed}</div>;
}

1. Must keep a slot → manipulate client-side after hydration via the slot API:

import { useEffect, useRef } from "react";

export function WithSlot() {
  const anchorRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const root = (anchorRef.current?.getRootNode?.() as ShadowRoot | null) ?? null;
    const slot = root?.querySelector('slot[name="slot"]') as HTMLSlotElement | null;
    const assigned = slot?.assignedElements({ flatten: true }) ?? [];

    // example manipulation
    for (const el of assigned) el.setAttribute('data-injected', '1');
  }, []);

  return (
    <div ref={anchorRef}>
      <slot name="slot" />
    </div>
  );
}

assignedElements() only exists in the browser; it won’t run on the server. MDN Web Docs

1. If the goal is structural changes to what’s inside the slot, push that logic into the child component you place into the slot, not the parent. Parent/child can’t share React context across slots due to isolation. Webflow Developers

Summary: SSR cannot “see” or modify slot content; use content props for SSR transformations, or manipulate slotted nodes on the client with assignedElements(). Webflow Developers+2Webflow Developers+2