prop

Callable

• prop<T>(context: Context<T>, opts?: PropOptions<T>): PropMeta<undefined | T>
• prop<T>(defaultValue: T, opts?: PropOptions<T>): PropMeta<T>
• prop<T>(defaultValue?: T, opts?: PropOptions<undefined | T>): PropMeta<undefined | T>

---

• Defines a property in your component metadata that can be set from outside of the component.

  Make sure to avoid conflicts with native HTMLElement properties.

  You can get properties by accessing the Signal in this.props. It's also possible to set the properties directly on the component instance.

  It's also possible to define an attribute for the property by setting the attribute option. By default, the attribute name is the kebab-case version of the property name. The attribute will be observed and the signal updated on changes. You can also provide a custom name and a transform function to convert the attribute value to the property value.

  @example

  class App extends Component("x-app", {
    greetingMessage: prop<string>("Hello, world!", {
      attribute: {
        name: "greeting",
      }
    }),
  }) {
    render() {
      return <h1>{this.props.greetingMessage}</h1>;
    }
  }
  
  defineComponents(App);
  
  const app = new App();
  app.greetingMessage = "Hello, universe!";

  ---

  Type parameters

  • T