modus-stencil-property-binding-solidjs

Stencil Web Component Property Binding in SolidJS

SolidJS and Stencil web components have interop pitfalls that cause silent failures. These rules prevent the three most common bugs.

Rule 1: Complex props must be set as JS properties, never JSX attributes

Stencil @Prop() values that are objects, arrays, or functions CANNOT be passed as JSX attributes. SolidJS will serialize them to [object Object] or drop them entirely.

Broken (silent failure - table shows "No data available"):

<modus-wc-table columns={columns} data={data} editable={true} />

Correct (set via ref + onMount/createEffect):

let tableEl;

onMount(() => {
  const table = tableEl;
  table.columns = columns;   // JS property assignment
  table.data = data;          // JS property assignment
  table.editable = true;
});

// Re-sync when props change
createEffect(() => {
  if (!tableEl) return;
  tableEl.columns = props.columns;
  tableEl.data = props.data;
});

return <modus-wc-table ref={(el) => (tableEl = el)} />;

Affected components: modus-wc-table (columns, data), modus-wc-navbar (userCard, visibility, textOverrides), modus-wc-autocomplete (items), modus-wc-select (options), any component with object/array/function props.

Rule 2: Named slots require child elements, not prop values

Some Stencil components expose a @Prop() AND a <slot> with the same semantic name. The prop may exist on the prototype but the component only renders content from the slot. Always check the component's render() method for <slot name="...">.

Broken (icon never appears despite property being set):

<modus-wc-menu-item start-icon="dashboard" label="Dashboard" />

Correct (render into the named slot):

<modus-wc-menu-item attr:label="Dashboard" attr:value="dashboard">
  <i class="modus-icons" slot="start-icon">dashboard</i>
</modus-wc-menu-item>

How to detect: If a prop is set (verified via DevTools element.propName) but nothing renders, check the component source for <slot name="...">. If the slot exists, you must provide a child element with slot="slot-name".