Knobs for slotted content

[bkjohnson]

This starting config is fantastic!

So far my only question is if it would be possible to have a knob or some kind of way of passing in HTML/JSX to a <slot /> in a component. Do you know if storybook would allow this?

[DesignByOnyx]

Hmmm, could you describe your use case with a little more detail so I can visualize it better. The short answer is probably "yes" - but I need to see what you're trying to do so I'm not guessing. Thanks!

[bkjohnson]

Sure. Let's say I redefined the default <my-component> so that the render function looked like this:

   render() {
-    return <div>Hello, World! I'm {this.getText()}</div>;
+    return (
+      <div>
+        Hello, World! I'm <slot />, nice to meet you!
+      </div>
+    );
   }
 }

In the index.html I can do something like this and expect to see it in the shadow DOM, along with any styles I've given to slotted content.

<my-component>
  <span>a component</span>
</my-component>

However, the more I look at knobs, the more it seems like it would be cumbersome to have a knob for slot content. Instead, maybe it would be easier to allow the story to export slotted content as part of the states array, and then make it a part of componentEl here.

[DesignByOnyx]

Ah, I see what you mean. I will ponder this as I can see how that would be useful. Though one of my goals is to keep a minimal API.

There's another feature for this thing which I haven't documented yet, but your individual story files can export a function instead of the object I used in the example. If we detect a function, it will be called with the story context and reference to KNOBS so that it can render itself (see code here). It would look something like this:

/* my-component.story.js */
export default function(stories, knobs) {
  const mainEl = document.createElement('div'); // do this OUTSIDE the render function below

  stories.add('my-component', () => {
    mainEl.innerHTML = '';
    /** 
    * Append things to the mainEl here. You can insert knob values
    * anywhere you want.
    */
    return mainEl;
  });
}

My plan with this is to eventually provide the function with all the utilities it needs to efficiently render a custom story without having to rewrite all the code I wrote to render a story. This would be similar to the idea of render props.