How to deal with slots in tunnels?

[f10l]

Hi,

I've been struggling to find a solution to pass the slots into a Tunnel.Consumer.

The following is not working (with is expected?):

<Tunnel.Consumer>
  {(state: State) => {
    console.log(state);
    return (
      <div>
        <slot />
      </div>
    );
  }}
</Tunnel.Consumer>

I did not find a documentation, how passing elements to the consumer can be achieved. What would be the straightforward solution to something like this?

[Secular12]

@fanick-ber I had the same issue and from what I can tell this is not possible, although I am not the developer. However I found somewhat of a way around it.

I wanted to render certain things differently based off of render so instead of using Tunnel.Consumer I used the Tunnel.injectProps method as seen in this issue #7. This allowed me to use a conditional statement inside my child component.

The main cause of issue seems to be that the <Tunnel.Consumer> loses the scope of slots. So in your case:

export class YourComponent {
   // ...
  @Element() el: HTMLElement; // is required for injectProps
  @Prop({ mutable: true }) myProp: string;
  // ...
  render () {
      console.log(myProp); // can do whatever you want with the passed on prop from here
      return (
        <div>
          <slot />
        </div>
      );
  }
}

Tunnel.injectProps(YourComponent, ['myProp']);

[f10l]

Thanks a lot for your help!

I did not get it running, yet. Somehow the linter already complains about the wrong type for the injection (type string is not assignable to type State) for the myProp injected prop.

I'll test further.

[Secular12]

@fanick-ber Before you get too far there is a partial problem, if you plan on using multiple "instances" of your custom element, this whole module doesn't seem to work instance by instance, prop-wise, see issue #8 still waiting on the developer for a response on that.

[f10l]

oh okay, thanks again!
I would love to see that solved :-)

[jthoms1]

I am going to mark this as resolved.