x-foo.tsx

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


@Component({
  tag: 'x-foo',
  shadow: true
})
export class XFoo {
  @Prop()
  public flag: string = 'foo';

  render() {
    if (this.flag === 'foo') {
      return (<slot name="foo" />);
    } else {
      return (<slot name="bar" />);
    }
  }
}