Public Properties

// chartBar.js
import { LightningElement, api } from 'lwc';

export default class ChartBar extends LightningElement {
    @api percentage;

    get style() {
        return `width: ${this.percentage}%`;
    }
}

<!-- apiProperty.html -->
<template>
    <lightning-input
        label="Percentage"
        type="number"
        value={percentage}
        onchange={handlePercentageChange}
    ></lightning-input>
    <c-chart-bar percentage={percentage}></c-chart-bar>
</template>

// apiProperty.js
import { LightningElement } from 'lwc';

export default class ApiProperty extends LightningElement {
    percentage = 50;

    handlePercentageChange(event) {
        this.percentage = event.target.value;
    }
}

// child.js
import { LightningElement, api } from 'lwc';

export default class Child extends LightningElement {
    @api firstName;
    @api lastName;

    get fullName() {
        return `${this.firstName} ${this.lastName}`;
    }
}

<!-- child.html -->
<template>
    <p>Hello, {fullName}!</p>
</template>

// todoList.js
import { LightningElement, api } from 'lwc';

export default class TodoList extends LightningElement {
    filteredTodos = [];
    _todos = [];
    priorityFilter = false;

    @api
    get todos() {
        return this._todos;
    }
    set todos(value) {
        this._todos = value;
        this.filterTodos();
    }

    filterTodos() {
        if (this.priorityFilter) {
            this.filteredTodos = this._todos.filter(
                (todo) => todo.priority === true
            );
        } else {
            this.filteredTodos = this._todos;
        }
    }
}

// apiSpread.js
import { LightningElement } from 'lwc';

export default class ApiSpread extends LightningElement {
    props = {
        firstName: 'Amy',
        lastName: 'Taylor'
    };

    handleChange(event) {
        const field = event.target.name;
        if (field === 'firstName') {
            this.props = {
                firstName: event.target.value,
                lastName: this.props.lastName
            };
        } else if (field === 'lastName') {
            this.props = {
                firstName: this.props.firstName,
                lastName: event.target.value
            };
        }
    }
}

<c-child {...props}></c-child>