SolidJS•15mo ago

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

2 Replies

vibeman1987•15mo ago

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

@chris_38815 so you just want a function to be execute when the component is loaded?

chrisOP•15mo ago

Yeah

Gaming

Programming

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