SolidJSS
SolidJS•3y ago•
14 replies
apademide

useContext() from custom element

I'm trying to access a context from a web component.
It's a single global context holding a singleton class as the value which provides access to the logged in user. It works as expected, but I can't find a way to make it accessible from web components.

I use web components to pass template strings as html from a JSON API; the aim here with wk-user is to be able to achieve syntax such as Hello, <wk-user property="name"></wk-user>! rather than creating a whole templating system.

I tried using solid-element's customElement:
customElement("wk-user", {}, () => {
  const User = useUser();

  console.log(User);

  return <div>{JSON.stringify(User)}</div>;
});

and component-register's compose + register + solid-element's withSolid
compose(
  register("wk-user", {}),
  withSolid,
)(() => {
  const User = useUser();

  console.log(User);

  return <div>{JSON.stringify(User)}</div>;
});

where both cases where undefined

I've also tried messing around with getOwner(), but getOwner()'s context prop appears to always be null within web components

Any help or information appreciated as I don't know where to even continue investigating
Was this page helpful?