How to send props from parent to child with LitElement

Question

Can someone show me some simple example about sending props from parent class to child? What is the problem:

parent component:

import { LitElement, html, css } from 'lit-element';

import './child.js';

class Parent extends LitElement {
    constructor() {
        super()

        this.message = "hello world"
    }


    render() {
        return html `<child-component message=${this.message}></child-component>` //how to get this props in child component?
    }
}

customElements.define('parent-component', Parent);

and child component:

    import { LitElement, html, css } from 'lit-element';
    class Child extends LitElement {
      ...

      render() {
        return html `<p>${message from parent, but how}</p>` //message props should go to constructor? to render method as argument? how?
      }
    }
}
customElements.define('child-component', Child);

Does this address your question? https://stackoverflow.com/questions/56719000/how-can-i-get-component-state-change-in-another-component-with-litelement — isherwood, Sep 17 '20 at 20:18

score 2 · Accepted Answer · edited Sep 18 '20 at 09:45

ok, I found solution. If I want to define properties in Parent class I have to add dot.

Reference: https://lit-element.polymer-project.org/guide/properties

render() {
    return html `<child-component .message=${this.message}></child-component>`
}

So now everything is working.

And full example:

parent component:

import { LitElement, html, css } from 'lit-element';

import './child.js';

class Parent extends LitElement {
    constructor() {
        super()

        this.message = "hello world"
    }


    render() {
        return html `<child-component .message=${this.message}></child-component>`
    }
}

customElements.define('parent-component', Parent);

child component:

import { LitElement, html, css } from 'lit-element';

class Child extends LitElement {
  ...

  render() {
    return html `<p>${this.message}</p>` //this.message have "hello world" value now
    }
}

customElements.define('child-component', Child);

Documentation on binding property expressions is now found here: https://lit.dev/docs/templates/expressions/#property-expressions — YouCodeThings, Jul 28 '22 at 00:36

score 0 · Answer 2 · answered Sep 25 '20 at 09:27

Make it much standard.

In your child component., set properties to listen to message.

import { LitElement, html, css } from 'lit-element';

class Child extends LitElement {
  static get properties(){
    return{
      message: {
        type: String,
      }
    }
  }
  constructor(){
    super();
    console.log(message);
  }

  render() {
    return html `<p>${this.message}</p>` //this.message have "hello world" value now
    }
}

customElements.define('child-component', Child);

score 0 · Answer 3 · answered Jul 03 '22 at 23:02

In children to load property from parent component:

    @property({type: Number}) propertyChild: number;
    constructor() {
      super();
      this.propertyChild = (this.parentElement as TypeParent).propertyParent;
    }

In parent to update properties on children:

 override updated(): void {
    this.childNodes.forEach(node=>{
      const nodeType = node as TypeChildren;
      if(nodeType.property) {
        nodeType.propertyChild = this.propertyParent;
      }
    })
  }

How to send props from parent to child with LitElement

3 Answers3

Linked