如何在Storybook中为Stencil嵌套子组件传递Props？

1. Shadow DOM 无Slot接收外部内容：MyCard启用了shadow: true（Shadow DOM模式），这种模式下组件标签内部的子元素（你在Story里写的<my-button>）默认不会被渲染，除非组件内部定义<slot>来承接外部传入的内容。你的MyCard没定义slot，所以外部的<my-button>直接被忽略。
2. 内部按钮未传参：MyCard的render方法里硬编码了一个<my-button>，但没传递label属性，这个按钮就是空的，和你在Story里写的外部按钮完全无关。
3. Story参数未作用到目标组件：你在MyCard的Story里给外部<my-button>传了label，但这个按钮根本没被渲染，参数自然无效。

根据需求，有两种常用实现方式：

方式一：用Slot允许外部自定义子组件（适合需要灵活定制卡片内容的场景） #

修改MyCard.tsx #

添加slot接收外部内容：

import { Component, h, Prop } from '@stencil/core';

@Component({
  tag: 'my-card',
  styleUrls: ['my-card.scss'],
  shadow: true,
})
export class MyCard {
  render() { 
      return (
        <div>
          <div>
            {/* 定义slot承接外部传入的子元素 */}
            <slot></slot>
          </div>
        </div>
      )
  }
}

保留MyCard.stories.ts写法 #

此时Story里的<my-button label="${args.label}">会被slot渲染，参数可正常生效。

方式二：MyCard内部管理按钮，通过Props传递参数（适合卡片按钮样式/逻辑固定，仅需动态传label的场景） #

修改MyCard.tsx #

给MyCard添加接收按钮label的属性，再传递给内部按钮：

import { Component, h, Prop } from '@stencil/core';

@Component({
  tag: 'my-card',
  styleUrls: ['my-card.scss'],
  shadow: true,
})
export class MyCard {
  // 新增属性接收按钮label
  @Prop() buttonLabel: string;

  render() { 
      return (
        <div>
          <div>
            {/* 将属性传递给内部的my-button */}
            <my-button label={this.buttonLabel}></my-button>
          </div>
        </div>
      )
  }
}

修改MyCard.stories.ts #

调整参数对应MyCard的buttonLabel属性：

const MyCardDefault = (args) => `<my-card button-label="${args.buttonLabel}"></my-card>`;

export const CardExample = MyCardDefault.bind({});
CardExample.args = { 
  buttonLabel: "CardButton"
}

内容的提问来源于stack exchange，提问作者happy_story