chris
chris
PostsComments
SSolidJS
Created by chris on 9/12/2023 in #support
when using <Portal /> on shadow mode, on change events are not working!
Hello, when using Portal in shadow mode I have some weird issues, onchange events are not happening, as a result I cannot type anything or programmatically invoke onchange. The host of the web component is react. Any ideas why this is happening, does this happen because of react and needs some sort of adapter to map react events into solid's web component?
3 replies
SSolidJS
Created by chris on 9/1/2023 in #support
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);
4 replies