Theming

Understanding Props and Slots in Drupal Single Directory Components for Drupal 10, 11

Props and slots are the two ways that data can be provided to a single directory component (SDC). They are part of a component's schema definition, and are used to determine the names of variables passed to a component's template file. Props pass structured, validated data into a component, while slots allow us to inject flexible content such as HTML or nested components. Understanding when and how to use each ensures you can build reusable and adaptable components.

In this tutorial, we'll:

  • Learn what props and slots are, and how they differ.
  • Discuss how using one or the other impacts the developer experience and use of your components in a UI.
  • Practice deciding when to use each for component design.

By the end of this tutorial, you'll know how to choose between props and slots when building components.

Frontend Theming