Angular Component Style Encapsulation: The Isolated UI Toolkit

Angular's component-based architecture is powerful, but ensuring that styles applied to one component don't accidentally affect others is crucial for maintainability and reusability. This challenge focuses on implementing effective style isolation within Angular components.

Your task is to create a set of Angular components that demonstrate robust style encapsulation, preventing unintended style leakage between components. This is fundamental for building complex, scalable applications where developers can confidently style individual components without fear of breaking the global UI.

Problem Description

You need to create three distinct Angular components: ButtonComponent, CardComponent, and ListComponent. Each component should have its own unique styling. The primary goal is to ensure that the styles defined for each component are completely isolated and do not bleed into or affect the styles of the other components, nor the global styles of the application.

Key Requirements:

Component Creation: Create three Angular components:
- ButtonComponent: A simple button with distinct styling (e.g., background color, border, padding).
- CardComponent: A container component with styling (e.g., background, border, shadow, padding). This component will also host ButtonComponent and ListComponent as its children.
- ListComponent: A list component displaying a simple list of items with specific styling for the list container and its items.
Style Isolation: Implement style isolation for each component such that:
- Styles defined in ButtonComponent only affect ButtonComponent instances.
- Styles defined in CardComponent only affect CardComponent instances.
- Styles defined in ListComponent only affect ListComponent instances.
- No styles from these components should affect the AppComponent's default styling or any other potential global styles.
Component Composition: The CardComponent should be designed to accept and render instances of ButtonComponent and ListComponent as its content.
Demonstration: The AppComponent should demonstrate the usage of all three components, showcasing the style isolation in action. For example, place multiple CardComponent instances, some containing ButtonComponent and ListComponent, and some without, to visually prove that styles are contained.

Expected Behavior:

When the application runs, the ButtonComponent should appear styled independently, the CardComponent should have its distinct look and feel, and the ListComponent should render its list items with their specific styling. Crucially, if you were to, for instance, apply a global p { color: red; } rule in styles.css, the paragraphs within ListComponent should not turn red, nor should any other elements within the components.

Edge Cases:

Nested Components: Consider how styles behave when a ButtonComponent is placed inside a CardComponent, which itself might be inside another CardComponent. Styles should remain isolated.
Host Styling: Styling applied to the host element of a component (e.g., :host in CSS) should be correctly isolated.

Examples

Example 1: Basic Styling Isolation

Assume you have the following in your component files:

button.component.ts (and button.component.html / button.component.css)

<button class="custom-button">Click Me</button>

/* button.component.css */
.custom-button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

card.component.ts (and card.component.html / card.component.css)

<div class="custom-card">
  <ng-content></ng-content> <!-- For content projection -->
</div>

/* card.component.css */
.custom-card {
  background-color: lightgrey;
  border: 1px solid grey;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
  padding: 20px;
  margin: 10px;
  border-radius: 8px;
}

list.component.ts (and list.component.html / list.component.css)

<ul class="custom-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

/* list.component.css */
.custom-list {
  list-style-type: square;
  padding-left: 30px;
}

.custom-list li {
  margin-bottom: 5px;
  color: darkgreen;
}

app.component.html

<h1>My Isolated Components</h1>

<app-card>
  <app-button></app-button>
  <app-list></app-list>
</app-card>

<app-card>
  <app-button></app-button>
</app-card>

<app-list></app-list>

Explanation:

If Angular's style encapsulation is working correctly, you will see:

A blue button with white text.
A grey card with a shadow.
A list with square bullets and dark green text for its items.

Critically, if you were to add button { background-color: red !important; } to styles.css, the Click Me button should not turn red because its styles are encapsulated. Similarly, if you added li { font-weight: bold; } to styles.css, the list items should not become bold. The styles within .custom-button, .custom-card, and .custom-list (and its li descendants) should remain dominant and isolated.

Constraints

The solution must be implemented using Angular and TypeScript.
Each component (ButtonComponent, CardComponent, ListComponent) must have its own dedicated CSS file.
Angular's default view encapsulation mechanism (e.g., ViewEncapsulation.Emulated) is expected to be used. You are not required to implement custom encapsulation logic beyond leveraging Angular's built-in features.
No external CSS frameworks or libraries that might interfere with style encapsulation should be used.
The AppComponent should be minimal, primarily serving to display the other components.

Notes

Angular's default behavior for component styles is to emulate encapsulation. This typically involves adding unique attributes to elements and scoping CSS selectors to these attributes. You'll see this in your browser's developer tools.
Pay close attention to how styles are defined within each component's CSS file.
Consider how ng-content (content projection) affects styling when components are nested.
The goal is to demonstrate that Angular's built-in encapsulation is effective for preventing style conflicts.