will just stringify the worker and pass that string to the `my-component`. To get the worker instance to be passed correctly, I'd need to do something like
Every time I go back to give Web Components another 5 minutes, I hit this point where using lit or a lit-like would take a lot of the pain of the problems Web Components don't solve and have no planned solution for away.
But once I decide to cross the "no dependencies" line, using something like Preact + htm as a no-build solution would also take the most of the rest of the pain away, and solve many, many other problems Web Components have no solution and no planned solution for.
So this isn't even a question about web workers, it's a question about how to prop-drill non-string/number data through multiple layers of web-components.
Tbh, I'm not sure there's a way for that. But why not just define a method in your target child component and pass the worker in there?
Yeah, I think the original question was a bit weirdly worded which made people focus on web workers rather than complex data in general.
You can use properties (as opposed to attributes) as I demonstrated, and you can use methods like you suggest, but these are both verbose and limited, and add an extra "the component has been created but the props haven't been fully passed" state to the component you're writing. Imagine a component with maybe five different props, all of which are complex objects that need to be passed by property. That's a lot of boilerplate to work with.
I showed earlier how it takes multiple lines and some fiddling with DOM to set a simple property with vanilla web components. Sure, if you're using a framework like lit, you have access to template binding, but at that point you might as well use an equivalent framework like SolidJS or Svelte which just skips the web component layer.
