自定义元素插槽

Dojo 小部件可以支持子对象，这些子对象通过使用“插槽”作为自定义元素来支持。slot 属性被添加到自定义元素的子元素中，子元素作为插槽的值被传递进来。

Dojo 自定义元素支持最常见的子对象场景。

命名子元素

Widget.tsx

export interface WidgetChildren {
	foo: RenderResult;
}

<Widget>
	{{
		foo: <Label>My Label</Label>
	}}
</Widget>

index.html

<dojo-widget>
  <dojo-label slot="foo">My Label</dojo-label>
</dojo-widget>

命名子元素渲染器

Widget.tsx

export interface WidgetChildren {
	foo: () => RenderResult;
}

<Widget>
	{{
		foo: () => <Label>My Label</Label>
	}}
</Widget>

index.html

<dojo-widget>
  <dojo-label slot="foo">My Label</dojo-label>
</dojo-widget>

命名子元素数组

如果多个子元素具有相同的插槽名称，它们将被捆绑在一起并作为数组传递给自定义元素。

Widget.tsx

export interface WidgetChildren {
	foo: RenderResult[];
}

<Widget>
	{{
		foo: [<Label>Label 1</Label>, <Label>Label 2</Label>]
	}}
</Widget>

index.html

<dojo-widget>
  <dojo-label slot="foo">Label 1</dojo-label>
  <dojo-label slot="foo">Label 2</dojo-label>
</dojo-widget>

命名子元素渲染器数组

Widget.tsx

export interface WidgetChildren {
	foo: (() => RenderResult)[];
}

<Widget>
	{{
		foo: [() => <Label>Label 1</Label>, () => <Label>Label 2</Label>]
	}}
</Widget>

index.html

<dojo-widget>
  <dojo-label slot="foo">Label 1</dojo-label>
  <dojo-label slot="foo">Label 2</dojo-label>
</dojo-widget>

带参数的命名子元素渲染器

如果小部件将参数传递给子元素渲染函数，则参数将通过“渲染”事件发送到插槽中的子元素。

Widget.tsx

export interface WidgetChildren {
	foo: (active: boolean) => RenderResult;
}

<Widget>
	{{
		foo: (active) => <Label active={active}>My Label</Label>
	}}
</Widget>

index.html

<dojo-widget>
  <dojo-label slot="foo" id="label1">Label 1</dojo-label>
  <dojo-label slot="foo" id="label2">Label 2</dojo-label>
</dojo-widget>

<script>
  function setActive(event) {
    const { detail: [active] } = event;
    event.target.active = active;
  }

  label1.addEventListener('render', setActive);
  label2.addEventListener('render', setActive);
</script>