Apex uses visibility keywords to control what classes, properties, and methods are visible within the scope of the class, within a package, and outside it. The same level of control is available for the Lightning components you place in your package.

JavaScript methods and properties within the controller are private by default. You can, however, add the @api annotation to enable access by other components in your package namespace. In the example shown here, the race component is used to display information about a given race and receives the information to display via properties:

import { LightningElement, api } from 'lwc';

export default class Race extends LightningElement {
    // Public properties
    @api
    raceId;
    @api
    name;
    @api
    raceDate;
    @api
    completed;
    // ...

These properties can be referenced programmatically or via HTML. The raceCalendar component references these properties in its markup as shown:

<template for:each={calendar.data} for:item="race">
    <ul class="slds-has-dividers_bottom-space" key={race.Id}>
        <c-race
            race-id={race.Id}
            name={race.Name} 
            race-date={race.RaceDate}
            completed={race.Completed} 
            location={race.Location} 
            selected={race.Selected}
            onselect={handleSelect}>
       </c-race>
    </ul>
</template>

The Making components customizable section will explain additional ways to expose your components to Lightning platform tools such as Lightning App Builder.