LitElement rendering collection of other elements with properties

Question

I created a React-based POC for a component library, and now I want to try and make a similar LitElement-based POC. In React, you can define a component like so:

export interface MyProps {
  prop1: string;
  prop2: number;
  ...
}

export interface MyState {
}

export class MyComponent extends React.ReactComponent<MyProps, MyState> {
  ...
}

In another component's 'render' method, if I have a collection of entities I'd like to represent with 'MyComponent', it can be done so like:

export class MyOtherComponent extends React.ReactComponent {
  render(): React.ReactNode {
    return (
      <MyComponent prop1={ this.state.prop1 } prop2={ this.state.prop2 } />
    );
  }
}

With LitElement, I can define MyComponent similarly:

@customElement('my-component')
export class MyComponent extends LitElement {
  @property()
  prop1: string | undefined;

  @property()
  prop2: number | undefined;

  ...
}

First difference here is that it seems I need to define my properties as "| undefined" because these are set after creating the element. Is that necessary?

But my real question comes down to how to implement 'MyOtherComponent':

@customElement('my-other-component')
export class MyComponent extends LitElement {
  ...
  render(): TemplateResult {
    return html`
      ${this._dataList.map((value) => html`<my-component prop1=${value.prop1} prop2=${value.prop2}/>`)}
    `;
  }
  ...
}

I can't set 'prop1' and 'prop2' inline as I could in React as those are not attributes, but properties. What is the best way to achieve this with LitElement?

Thanks in advance!

• Steve

Answer 1

As noted by @Steve, my comment had the answer. I'm putting it here at the recommendation of @Jeremey:

Put a period (.) on the property names: <my-component .prop1=${value.prop1} .prop2=${value.prop2}></my-component>

See: https://lit-html.polymer-project.org/guide/writing-templates#bind-to-properties (And BTW, custom elements require a closing tag.)