stencil_web_component_name_props_formatted_greeting.ts

1import { Component, Prop, h } from '@stencil/core';
2
3@Component({
4  tag: 'my-component',
5  styleUrl: 'my-component.css',
6  shadow: true,
7})
8export class MyComponent {
9  /**
10   * The first name
11   */
12  @Prop() first: string;
13
14  /**
15   * The middle name
16   */
17  @Prop() middle: string;
18
19  /**
20   * The last name
21   */
22  @Prop() last: string;
23
24  private getText(): string {
25    return `${this.first} ${this.middle} ${this.last}`;
26  }
27
28  render() {
29    return <div>Hello, World! I'm {this.getText()}</div>;
30  }
31}