SolidJS•3y ago•

14 replies

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

wk-user

is to be able to achieve syntax such as

Hello, <wk-user property="name"></wk-user>!

Hello, <wk-user property="name"></wk-user>!

rather than creating a whole templating system.

I tried using

solid-element

solid-element

customElement

customElement

customElement("wk-user", {}, () => {
  const User = useUser();

  console.log(User);

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

customElement("wk-user", {}, () => {
  const User = useUser();

  console.log(User);

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

and

component-register

component-register

compose

compose

register

register

solid-element

solid-element

withSolid

withSolid

compose(
  register("wk-user", {}),
  withSolid,
)(() => {
  const User = useUser();

  console.log(User);

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

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()

getOwner()

, but

getOwner()

getOwner()

context

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

SolidJS•3y ago•

14 replies

apademide

useContext() from custom element

wk-user

wk-user

is to be able to achieve syntax such as

Hello, <wk-user property="name"></wk-user>!

Hello, <wk-user property="name"></wk-user>!

rather than creating a whole templating system.

I tried using

solid-element

solid-element

customElement

customElement

customElement("wk-user", {}, () => {
  const User = useUser();

  console.log(User);

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

customElement("wk-user", {}, () => {
  const User = useUser();

  console.log(User);

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

and

component-register

component-register

compose

compose

register

register

solid-element

solid-element

withSolid

withSolid

compose(
  register("wk-user", {}),
  withSolid,
)(() => {
  const User = useUser();

  console.log(User);

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

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()

getOwner()

, but

getOwner()

getOwner()

context

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

useContext() from custom element

Similar Threads

useContext() from custom element

Similar Threads

Similar Threads

Similar Threads