Overriding a component

A theme can be used to override components provided by other themes or modules.

Suppose that we have defined a component in the alps_weather module, inside a folder named web/modules/custom/alps_weather/components/at-weather. The at-weather.component.yml file looks like the following:

'$schema': 'https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json'
name: "Alps Trips Weather"
status: "stable"
description: "A weather component"
props:
  type: object
  properties:
    city:
      type: string
      title: City
      description: The city for the weather
  required:
    - city

And the Twig file (at-weather.twig) looks as follows:

<div>Weather for {{ city }}</div>

We can include this component...