web component built using solid-element couldn't able to access the context from the parent web-component

[Waishnav]

Describe the bug

For Solid Hack 2024, I experimented with the solid-element API to convert Solid components into web components. I attempted to create a ShadCN-based web component library, aiming to make it particularly useful for the HTMX community. I saw this as a strong use case for Solid.js.

I tried porting an Accordion component to a web component, so that end-users could use it like this:

<accordion class="w-full" collapsible>
  <accordion-item value="item-1">
    <accordion-trigger>Is it accessible?</accordion-trigger>
    <accordion-content>Yes. It adheres to the WAI-ARIA design pattern.</accordion-content>
  </accordion-item>
  <accordion-item value="item-2">
    <accordion-trigger>Is it styled?</accordion-trigger>
    <accordion-content>Yes. It comes with default styles that match the other components' aesthetic.</accordion-content>
  </accordion-item>
  <accordion-item value="item-3">
    <accordion-trigger>Is it animated?</accordion-trigger>
    <accordion-content>Yes. It's animated by default, but you can disable it if you prefer.</accordion-content>
  </accordion-item>
</accordion>

However, since each sub-component like AccordionItem and AccordionContent was converted to accordion-item and accordion-content, I encountered the following errors:

Uncaught Error: [kobalte]: `useAccordionContext` must be used within an `Accordion.Root` component
Uncaught Error: [kobalte]: `useCollapsibleContext` must be used within a `Collapsible.Root` component
Uncaught Error: [kobalte]: `useAccordionItemContext` must be used within an `Accordion.Item` component

These errors are caused because kobalte expects certain contexts to be nested within specific parent components, but the web component conversion disrupts this hierarchy.

Your Example Website or App

https://studio.webcomponents.dev/edit/VcOP3wIWw9SP1xt0fMwf/src/components.jsx?file=https://srv.divriots.com/packd/@kobalte/core/accordion,@kobalte/core/combobox,@kobalte/core/select,@kobalte/core/text-field,clsx,lit-html,lucide-solid,solid-element,solid-js,solid-js/web,tailwind-merge

Steps to Reproduce the Bug or Issue

1. write a composable ui component using solid-element and solidjs's context api and store api.

2. it will throw error like this

Expected behavior

context should be shared b/w children in web components too

Screenshots or Videos

No response

Platform

• OS: Linux
• Browser: Chrome
• Version: solid: 1.9.3, solid-elements: 1.9.1

Additional context

No response