Single Directory Components are twig templates plus css/js that are loaded together.
Unlike libraries which are just css/js, SDC provides the html structure to pair with the styles and scripts.
This means that instead of loading a library as a dependency and adding the right classes to your template, you can have them all in one place and customize them together.
SDC was added to core as experimental in 10.1, and became stable in 10.3. Prior to that, it was a contrib module.
Going forward, we will not need to enable SDC as a module.
https://www.drupal.org/node/3410260
Component driven development
In component driven development, we can build encapsulated components that load their own dependencies.
This paradigm moves away from global styling that can be tricky to override.
It also lets front end develops work independently of Drupal, with a schema as the interface for passing props and slots into the component.
Creating an SDC component
To get started, add a /components/COMPONENT directory to your theme.
Create *.component.yml according to the docs.
Create a template and include or embed the component.
You can choose to define props and slots, or use the same variables from the template inside the component.
Use drush to generate a component: drush gen single-directory-component.
Modules
The SDC Display module lets you render entities, fields, and field groups as components.
When an entity is rendered as a component, it loses the contextual edit links from it's template.
SDC Display Preprocess is an experimental module that can help populate variables.