Need to pass a function as a dependency to the solid js web component.

Hello
I have made a web component with solid and I need to pass a function as a dependency to it.
I know that web components props are serialized and accepts only primitive values like strings and numbers.
In my previous experience with web component I used stencil and you could declare a method as public so that you can invoke it from the host application.

Also provides some build in lifecycle methods like

componentOnReady

componentOnReady

as object attributes accessible from dom, so that can invoke the public method on the correct time.

I'm searching for examples or opinions on how can I achieve something like this in solid element.

  const initialize = () => {
    const myWebcomponent = document.querySelector(
      'my-webcomponent',
    );

    if (!myWebcomponent || !myWebcomponent.componentOnReady) return;
    
    console.log(myWebcomponent);

    myWebcomponent?.componentOnReady().then(() => {
      myWebcomponent.myPublicMethod({...deps, depFunc: () =>        // do smth});
    });
  };

  document.addEventListener('DOMContentLoaded', initialize);

  const initialize = () => {
    const myWebcomponent = document.querySelector(
      'my-webcomponent',
    );

    if (!myWebcomponent || !myWebcomponent.componentOnReady) return;
    
    console.log(myWebcomponent);

    myWebcomponent?.componentOnReady().then(() => {
      myWebcomponent.myPublicMethod({...deps, depFunc: () =>        // do smth});
    });
  };

  document.addEventListener('DOMContentLoaded', initialize);

SolidJS•3y ago•

3 replies

chris

Need to pass a function as a dependency to the solid js web component.

componentOnReady

componentOnReady

as object attributes accessible from dom, so that can invoke the public method on the correct time.

I'm searching for examples or opinions on how can I achieve something like this in solid element.

  const initialize = () => {
    const myWebcomponent = document.querySelector(
      'my-webcomponent',
    );

    if (!myWebcomponent || !myWebcomponent.componentOnReady) return;
    
    console.log(myWebcomponent);

    myWebcomponent?.componentOnReady().then(() => {
      myWebcomponent.myPublicMethod({...deps, depFunc: () =>        // do smth});
    });
  };

  document.addEventListener('DOMContentLoaded', initialize);

  const initialize = () => {
    const myWebcomponent = document.querySelector(
      'my-webcomponent',
    );

    if (!myWebcomponent || !myWebcomponent.componentOnReady) return;
    
    console.log(myWebcomponent);

    myWebcomponent?.componentOnReady().then(() => {
      myWebcomponent.myPublicMethod({...deps, depFunc: () =>        // do smth});
    });
  };

  document.addEventListener('DOMContentLoaded', initialize);

Need to pass a function as a dependency to the solid js web component.

Similar Threads

Need to pass a function as a dependency to the solid js web component.

Similar Threads

Similar Threads

Similar Threads