Reproduction

Given a hook like so:

// useText.ts
export const useText = (props: TextProps, ref: React.Ref<HTMLElement>): TextState => {
  return {
    {...}

    components: { root: 'span' },

    root: getNativeElementProps(props.as ?? 'span', {
      ref,
      ...props,
    }),
  };
};

With getNativeElementProps, our state.root consists of:

{
  ref,
  className,
  children
}

Which means that, when rendering the slot:

// renderText.ts
export const renderText = (state: TextState) => {
  const { slots, slotProps } = getSlots<TextSlots>(state, ['root']);

  return <slots.root {...slotProps.root} />;
};

slots.root == 'span' as state.root has no information of what to render it as.

Actual behavior:

getSlots doesn't get the required information to render slots when using getNativeElementProps.

Expected behavior:

Slot is rendered with the element provided with the as prop

Priorities and help requested:

Are you willing to submit a PR to fix? Yes

Requested priority: High

Products/sites affected:

• react-text
• react-link