Using web components in React sever components

Question

Prior the /app router and default server components in Next.js 13, I was able to use web components generated via StencilJS as per the with-stencil starter, by defining the custom elements in _app.tsx.

import { useLayoutEffect } from 'react'
import { applyPolyfills, defineCustomElements } from 'test-component/loader'

export default function App({ Component, pageProps }) {
  useLayoutEffect(() => {
    applyPolyfills().then(() => {
      defineCustomElements(window)
    })
  }, [])
  return <Component {...pageProps} />
}

// Then use in any component like so
export default function Home() {
  return (
    <div>
      <my-component first="Next.js" last="The React Framework"></my-component>
    </div>
  )
}

With the advent of default Server components, is it even possible to use web components (which to my knowledge rely on browser APIs) in server components? I tried adapting my project by defining a CustomElements client component containing the above defineCustomElements, then importing that into a page.tsx server component,

'use client';
import { useLayoutEffect } from "react";
import { applyPolyfills, defineCustomElements } from 'path/to/your/stencil-components/loader';


const CustomElements = () => {
  useLayoutEffect(() => {
    applyPolyfills().then(() => {
      defineCustomElements(window)
    })
  }, [])
  return <></>;
}

export default CustomElements;

but the web components don't render and I get errors like

TypeError: Cannot read properties of undefined (reading '$hostElement$')
TypeError: Cannot read properties of undefined (reading '$instanceValues$')

from the web component library.

Any ideas?