diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 209146558d0..ee05d69d968 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,4 +1,5 @@
 import { TreeGridAddRowSampleComponent } from './tree-grid-add-row/tree-grid-add-row.sample';
+import { StyleInheritanceTestComponent } from './style-inheritance-test/style-inheritance-test.component';
 import { Routes } from '@angular/router';
 import { AvatarSampleComponent } from './avatar/avatar.sample';
 import { BadgeSampleComponent } from './badge/badge.sample';
@@ -729,5 +730,9 @@ export const appRoutes: Routes = [
     {
         path: 'labelDirective',
         component: LabelSampleComponent
+    },
+    {
+        path: 'style-inheritance-test',
+        component: StyleInheritanceTestComponent
     }
 ];
diff --git a/src/app/style-inheritance-test/RESEARCH.md b/src/app/style-inheritance-test/RESEARCH.md
new file mode 100644
index 00000000000..1f33ab06fc7
--- /dev/null
+++ b/src/app/style-inheritance-test/RESEARCH.md
@@ -0,0 +1,247 @@
+# Research: Avoiding Style Duplication with Adopted StyleSheets
+
+## The Problem
+When Component A and Component C extend Component B, and only A and C are used on the page:
+- Using `styleUrls` array duplicates base styles in each child's CSS bundle
+- Angular doesn't natively inherit styles through class extension
+
+## Solution: Constructable StyleSheets (Adopted StyleSheets API)
+
+### What Are Adopted StyleSheets?
+The `adoptedStyleSheets` API allows you to create a `CSSStyleSheet` object in JavaScript and share it across multiple Shadow DOMs or the document. **The same stylesheet instance is shared, not duplicated.**
+
+```javascript
+// Create a stylesheet once
+const sheet = new CSSStyleSheet();
+sheet.replaceSync('.base-container { padding: 20px; }');
+
+// Share it across multiple shadow roots
+element1.shadowRoot.adoptedStyleSheets = [sheet];
+element2.shadowRoot.adoptedStyleSheets = [sheet];
+// Same sheet object, no duplication!
+```
+
+### Browser Support (as of 2026)
+- ✅ Chrome 73+
+- ✅ Edge 79+
+- ✅ Firefox 101+
+- ✅ Safari 16.4+
+
+**Source:** [Can I Use: adoptedStyleSheets](https://caniuse.com/mdn-api_document_adoptedstylesheets)
+
+---
+
+## References & Sources
+
+### Official Documentation
+1. **MDN Web Docs - adoptedStyleSheets**
+   - https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets
+   - https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet
+
+2. **web.dev - Constructable Stylesheets**
+   - https://web.dev/articles/constructable-stylesheets
+
+3. **Google Developers - Constructable Stylesheets**
+   - https://developers.google.com/web/updates/2019/02/constructable-stylesheets
+
+4. **Angular Documentation**
+   - Component Styling: https://angular.dev/guide/components/styling
+   - ViewEncapsulation: https://angular.dev/api/core/ViewEncapsulation
+   - Component Inheritance: https://angular.dev/guide/components/inheritance
+
+### Framework Implementations
+5. **Lit (Google's Web Components Library)**
+   - https://lit.dev/docs/components/styles/
+   - Lit uses `adoptedStyleSheets` by default for all components
+
+6. **Stencil.js**
+   - https://stenciljs.com/docs/styling
+   - Uses constructable stylesheets with automatic fallback
+
+7. **Shoelace (Web Components Library)**
+   - https://shoelace.style/
+   - Uses shared stylesheet registry pattern
+
+### Community Discussions
+8. **Angular GitHub Issues**
+   - Style inheritance discussion: https://github.com/angular/angular/issues/7773
+   - Component inheritance and decorators: https://github.com/angular/angular/issues/31495
+
+9. **CSS Working Group - Constructable Stylesheets Spec**
+   - https://wicg.github.io/construct-stylesheets/
+
+---
+
+## Implementation Approaches
+
+### Approach 1: Shared StyleSheet Service
+Create a service that provides shared CSSStyleSheet instances:
+
+```typescript
+@Injectable({ providedIn: 'root' })
+export class SharedStylesService {
+    private baseStyles: CSSStyleSheet;
+
+    constructor() {
+        this.baseStyles = new CSSStyleSheet();
+        this.baseStyles.replaceSync(`
+            .base-container { padding: 20px; border: 2px solid #3f51b5; }
+            .base-button { padding: 10px 20px; background: #3f51b5; }
+        `);
+    }
+
+    getBaseStyles(): CSSStyleSheet {
+        return this.baseStyles;
+    }
+}
+```
+
+### Approach 2: Component with Shadow DOM + Adopted StyleSheets
+```typescript
+@Component({
+    selector: 'app-child-a',
+    template: `...`,
+    encapsulation: ViewEncapsulation.ShadowDom
+})
+export class ChildAComponent implements OnInit {
+    private sharedStyles = inject(SharedStylesService);
+    private elementRef = inject(ElementRef);
+
+    ngOnInit() {
+        const shadowRoot = this.elementRef.nativeElement.shadowRoot;
+        shadowRoot.adoptedStyleSheets = [
+            this.sharedStyles.getBaseStyles(),
+            this.childStyles  // child-specific styles
+        ];
+    }
+}
+```
+
+### Approach 3: Base Class with Style Injection (Directive Pattern)
+```typescript
+@Directive()
+export abstract class StyledBaseDirective implements OnInit {
+    protected elementRef = inject(ElementRef);
+    protected sharedStyles = inject(SharedStylesService);
+
+    ngOnInit() {
+        this.applySharedStyles();
+    }
+
+    protected applySharedStyles() {
+        const shadowRoot = this.elementRef.nativeElement.shadowRoot;
+        if (shadowRoot) {
+            const existingStyles = [...shadowRoot.adoptedStyleSheets];
+            shadowRoot.adoptedStyleSheets = [
+                this.sharedStyles.getBaseStyles(),
+                ...existingStyles
+            ];
+        }
+    }
+}
+```
+
+---
+
+## What Other Libraries/Frameworks Do
+
+### 1. Lit (Google's Web Components Library)
+Lit uses `adoptedStyleSheets` by default for style sharing:
+```javascript
+class MyElement extends LitElement {
+    static styles = css`.base { padding: 20px; }`;
+}
+// Styles are automatically shared via adoptedStyleSheets
+```
+
+### 2. Stencil.js
+Uses constructable stylesheets when available, falls back to `<style>` tags.
+
+### 3. Angular Material / CDK
+- Uses global styles for shared theming
+- Component-specific styles are scoped via emulated encapsulation
+- Uses CSS custom properties extensively for theming
+
+### 4. Vaadin Components
+- Uses a shared stylesheet registry
+- Components register their styles in a central location
+- Styles are deduplicated at runtime
+
+### 5. Shoelace (Web Components Library)
+Uses a shared stylesheet approach with `adoptedStyleSheets`:
+```javascript
+// All components share the same base styles
+const baseStyles = new CSSStyleSheet();
+baseStyles.replaceSync(baseCSS);
+// Applied to each component's shadow root
+```
+
+---
+
+## Angular-Specific Solutions
+
+### Solution 1: CSS Custom Properties (No Duplication)
+Define variables globally, use in components:
+```scss
+// styles.scss (global)
+:root {
+    --base-padding: 20px;
+    --base-border-color: #3f51b5;
+}
+
+// child.component.css
+.container {
+    padding: var(--base-padding);
+    border: 2px solid var(--base-border-color);
+}
+```
+
+### Solution 2: Global Utility Classes
+```scss
+// styles.scss
+.base-container { padding: 20px; border: 2px solid #3f51b5; }
+.base-button { padding: 10px 20px; background: #3f51b5; }
+```
+
+### Solution 3: ViewEncapsulation.None (Careful!)
+```typescript
+@Component({
+    encapsulation: ViewEncapsulation.None,
+    styles: [`.base-container { padding: 20px; }`]
+})
+export class BaseComponent {}
+```
+Children will inherit because styles are global.
+
+### Solution 4: Custom Adopted StyleSheets Implementation
+Create a service + directive that manages shared styles via `adoptedStyleSheets`.
+
+---
+
+## Recommended Approach for Your Case
+
+### Best Solution: Shared Styles Service + Shadow DOM
+
+1. **Create a SharedStylesService** that creates `CSSStyleSheet` objects once
+2. **Use `ViewEncapsulation.ShadowDom`** in your components
+3. **Apply shared stylesheets** via `adoptedStyleSheets` in base class
+4. **Each child adds its own styles** on top
+
+This ensures:
+- ✅ Base styles are defined once in memory
+- ✅ No style duplication in bundles
+- ✅ True encapsulation via Shadow DOM
+- ✅ Children can extend/override base styles
+
+---
+
+## Trade-offs
+
+| Approach | Duplication | Encapsulation | Complexity | Browser Support |
+|----------|-------------|---------------|------------|-----------------|
+| `styleUrls` array | ❌ Yes | ✅ Emulated | ⭐ Easy | ✅ All |
+| Global styles | ✅ None | ❌ None | ⭐ Easy | ✅ All |
+| CSS Variables | ✅ None | ✅ Yes | ⭐⭐ Medium | ✅ All |
+| Adopted StyleSheets | ✅ None | ✅ Shadow DOM | ⭐⭐⭐ Complex | ✅ Modern |
+| ViewEncapsulation.None | ✅ None | ❌ None | ⭐ Easy | ✅ All |
+
diff --git a/src/app/style-inheritance-test/base-no-encapsulation/base-no-encapsulation.component.ts b/src/app/style-inheritance-test/base-no-encapsulation/base-no-encapsulation.component.ts
new file mode 100644
index 00000000000..d1903365fbf
--- /dev/null
+++ b/src/app/style-inheritance-test/base-no-encapsulation/base-no-encapsulation.component.ts
@@ -0,0 +1,69 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, signal } from '@angular/core';
+
+/**
+ * Base Component with ViewEncapsulation.None
+ *
+ * TEST: Will these styles be available globally even when this component
+ * is NOT rendered on the page, but only its children are?
+ */
+@Component({
+    selector: 'app-base-no-encapsulation',
+    template: `
+        <div class="base-no-encap-container">
+            <h3 class="base-no-encap-title">Base (No Encapsulation)</h3>
+            <p class="base-no-encap-content">Value: {{ value() }}</p>
+            <button class="base-no-encap-button" (click)="increment()">Increment</button>
+        </div>
+    `,
+    styles: [`
+        /* =====================================================
+           STYLES WITH ViewEncapsulation.None
+           These styles should be GLOBAL - no scoping attributes
+           ===================================================== */
+        
+        .base-no-encap-container {
+            padding: 20px;
+            border: 3px solid #673ab7;
+            border-radius: 8px;
+            margin: 10px;
+            background-color: #ede7f6;
+        }
+
+        .base-no-encap-title {
+            color: #673ab7;
+            font-size: 1.5rem;
+            margin: 0 0 10px 0;
+            font-weight: 600;
+        }
+
+        .base-no-encap-content {
+            color: #333;
+            font-size: 1rem;
+            margin: 10px 0;
+        }
+
+        .base-no-encap-button {
+            padding: 10px 20px;
+            background-color: #673ab7;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 1rem;
+        }
+
+        .base-no-encap-button:hover {
+            background-color: #512da8;
+        }
+    `],
+    encapsulation: ViewEncapsulation.None,  // KEY: Styles are global!
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class BaseNoEncapsulationComponent {
+    protected readonly value = signal(0);
+
+    public increment() {
+        this.value.update(v => v + 1);
+    }
+}
+
diff --git a/src/app/style-inheritance-test/base/base.component.css b/src/app/style-inheritance-test/base/base.component.css
new file mode 100644
index 00000000000..e7bc043a8a3
--- /dev/null
+++ b/src/app/style-inheritance-test/base/base.component.css
@@ -0,0 +1,41 @@
+/* ===========================================
+   BASE COMPONENT STYLES (Component B)
+   These styles should ideally be shared, not duplicated
+   =========================================== */
+
+.base-container {
+    padding: 20px;
+    border: 2px solid #3f51b5;
+    border-radius: 8px;
+    margin: 10px;
+    background-color: #f5f5f5;
+}
+
+.base-title {
+    color: #3f51b5;
+    font-size: 1.5rem;
+    margin: 0 0 10px 0;
+    font-weight: 600;
+}
+
+.base-content {
+    color: #333;
+    font-size: 1rem;
+    margin: 10px 0;
+}
+
+.base-button {
+    padding: 10px 20px;
+    background-color: #3f51b5;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1rem;
+    transition: background-color 0.3s ease;
+}
+
+.base-button:hover {
+    background-color: #303f9f;
+}
+
diff --git a/src/app/style-inheritance-test/base/base.component.ts b/src/app/style-inheritance-test/base/base.component.ts
new file mode 100644
index 00000000000..95f77df2c82
--- /dev/null
+++ b/src/app/style-inheritance-test/base/base.component.ts
@@ -0,0 +1,26 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+
+/**
+ * Component B - The Base Component
+ * This component provides base styles that should be shared by components that extend it.
+ */
+@Component({
+    selector: 'app-base',
+    template: `
+        <div class="base-container">
+            <h3 class="base-title">Base Component</h3>
+            <p class="base-content">Value: {{ value() }}</p>
+            <button class="base-button" (click)="increment()">Increment</button>
+        </div>
+    `,
+    styleUrl: './base.component.css',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class BaseComponent {
+    protected readonly value = signal(0);
+
+    increment() {
+        this.value.update(v => v + 1);
+    }
+}
+
diff --git a/src/app/style-inheritance-test/child-a/child-a.component.css b/src/app/style-inheritance-test/child-a/child-a.component.css
new file mode 100644
index 00000000000..f656355b962
--- /dev/null
+++ b/src/app/style-inheritance-test/child-a/child-a.component.css
@@ -0,0 +1,27 @@
+/* ===========================================
+   CHILD A COMPONENT - EXTRA STYLES ONLY
+   This file should ONLY contain Child A specific styles.
+   Base styles should come from the parent component.
+   =========================================== */
+
+/* Child A specific wrapper modification */
+.child-a-wrapper {
+    border-color: #4caf50;
+    background-color: #e8f5e9;
+}
+
+/* Child A specific elements */
+.child-a-extra {
+    margin: 15px 0;
+}
+
+.child-a-badge {
+    display: inline-block;
+    padding: 5px 12px;
+    background-color: #4caf50;
+    color: white;
+    border-radius: 16px;
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+
diff --git a/src/app/style-inheritance-test/child-a/child-a.component.ts b/src/app/style-inheritance-test/child-a/child-a.component.ts
new file mode 100644
index 00000000000..e7f09520138
--- /dev/null
+++ b/src/app/style-inheritance-test/child-a/child-a.component.ts
@@ -0,0 +1,33 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { BaseComponent } from '../base/base.component';
+
+/**
+ * Component A - Extends Base Component B
+ *
+ * NATIVE ANGULAR SOLUTION: Use `styleUrls` array to include base styles.
+ * This ensures base styles are available even when BaseComponent isn't rendered.
+ *
+ * ⚠️ Note: This WILL duplicate base styles in each child's CSS bundle.
+ */
+@Component({
+    selector: 'app-child-a',
+    template: `
+        <div class="base-container child-a-wrapper">
+            <h3 class="base-title">Child A Component</h3>
+            <p class="base-content">Value from parent: {{ value() }}</p>
+            <div class="child-a-extra">
+                <span class="child-a-badge">Component A</span>
+            </div>
+            <button class="base-button" (click)="increment()">Increment (A)</button>
+        </div>
+    `,
+    styleUrls: [
+        '../base/base.component.css',  // ← Include base styles
+        './child-a.component.css'       // ← Child-specific styles
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ChildAComponent extends BaseComponent {
+    // Inherits value signal and increment() from BaseComponent
+}
+
diff --git a/src/app/style-inheritance-test/child-c/child-c.component.css b/src/app/style-inheritance-test/child-c/child-c.component.css
new file mode 100644
index 00000000000..80c5ad896f9
--- /dev/null
+++ b/src/app/style-inheritance-test/child-c/child-c.component.css
@@ -0,0 +1,37 @@
+/* ===========================================
+   CHILD C COMPONENT - EXTRA STYLES ONLY
+   This file should ONLY contain Child C specific styles.
+   Base styles should come from the parent component.
+   
+   ⚠️ BUT: We did NOT include base styles via styleUrls!
+   So .base-container, .base-button etc. won't work.
+   =========================================== */
+
+/* Child C specific wrapper modification */
+.child-c-wrapper {
+    border-color: #f44336;
+    background-color: #ffebee;
+}
+
+/* Child C specific elements */
+.child-c-extra {
+    margin: 15px 0;
+}
+
+.child-c-badge {
+    display: inline-block;
+    padding: 5px 12px;
+    background-color: #f44336;
+    color: white;
+    border-radius: 16px;
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+
+.missing-styles-note {
+    color: #d32f2f;
+    font-size: 0.875rem;
+    font-style: italic;
+    margin-top: 10px;
+}
+
diff --git a/src/app/style-inheritance-test/child-c/child-c.component.ts b/src/app/style-inheritance-test/child-c/child-c.component.ts
new file mode 100644
index 00000000000..e49b7f316ca
--- /dev/null
+++ b/src/app/style-inheritance-test/child-c/child-c.component.ts
@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { BaseComponent } from '../base/base.component';
+
+/**
+ * Component C - Extends Base Component B
+ *
+ * THIS COMPONENT DOES NOT INCLUDE BASE STYLES!
+ * It only has its own styleUrl, so base styles (.base-container, etc.)
+ * will NOT be applied.
+ *
+ * Compare this to Child A which uses styleUrls array.
+ */
+@Component({
+    selector: 'app-child-c',
+    template: `
+        <div class="base-container child-c-wrapper">
+            <h3 class="base-title">Child C Component</h3>
+            <p class="base-content">Value from parent: {{ value() }}</p>
+            <div class="child-c-extra">
+                <span class="child-c-badge">Component C</span>
+                <p class="missing-styles-note">⚠️ Notice: No padding, no border, no base styling!</p>
+            </div>
+            <button class="base-button" (click)="increment()">Increment (C)</button>
+        </div>
+    `,
+    styleUrl: './child-c.component.css',  // ← Only child styles, NO base styles
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ChildCComponent extends BaseComponent {
+    // Inherits value signal and increment() from BaseComponent
+}
+
diff --git a/src/app/style-inheritance-test/child-d/child-d.component.ts b/src/app/style-inheritance-test/child-d/child-d.component.ts
new file mode 100644
index 00000000000..bd4c89bd135
--- /dev/null
+++ b/src/app/style-inheritance-test/child-d/child-d.component.ts
@@ -0,0 +1,64 @@
+import { ChangeDetectionStrategy, Component, signal, ViewEncapsulation } from '@angular/core';
+import { StyledBaseDirective } from '../styled-base.directive';
+
+/**
+ * Child D Component - Uses Adopted StyleSheets
+ *
+ * This component extends StyledBaseDirective which applies shared base styles
+ * via adoptedStyleSheets. The base styles are NOT duplicated - they're shared!
+ *
+ * KEY: Uses ViewEncapsulation.ShadowDom to enable adoptedStyleSheets.
+ */
+@Component({
+    selector: 'app-child-d',
+    template: `
+        <div class="base-container child-d-wrapper">
+            <h3 class="base-title">Child D Component</h3>
+            <p class="base-content">Value: {{ value() }}</p>
+            <div class="child-d-extra">
+                <span class="child-d-badge">Component D (Adopted Styles)</span>
+            </div>
+            <button class="base-button" (click)="increment()">Increment (D)</button>
+        </div>
+    `,
+    // NO styleUrl or styles! Styles come from adoptedStyleSheets
+    encapsulation: ViewEncapsulation.ShadowDom,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ChildDComponent extends StyledBaseDirective {
+    protected readonly value = signal(0);
+
+    public increment() {
+        this.value.update(v => v + 1);
+    }
+
+    /**
+     * Child D specific styles - only the D-specific parts!
+     * Base styles (.base-container, .base-button, etc.) come from shared service.
+     */
+    protected override getChildCSS(): string {
+        return `
+            /* Child D specific styles ONLY */
+            .child-d-wrapper {
+                border-color: #9c27b0;
+                background-color: #f3e5f5;
+            }
+
+            .child-d-extra {
+                margin: 15px 0;
+            }
+
+            .child-d-badge {
+                display: inline-block;
+                padding: 5px 12px;
+                background-color: #9c27b0;
+                color: white;
+                border-radius: 16px;
+                font-size: 0.875rem;
+                font-weight: 500;
+            }
+        `;
+    }
+}
+
+
diff --git a/src/app/style-inheritance-test/child-e/child-e.component.ts b/src/app/style-inheritance-test/child-e/child-e.component.ts
new file mode 100644
index 00000000000..feb8662c100
--- /dev/null
+++ b/src/app/style-inheritance-test/child-e/child-e.component.ts
@@ -0,0 +1,64 @@
+import { ChangeDetectionStrategy, Component, signal, ViewEncapsulation } from '@angular/core';
+import { StyledBaseDirective } from '../styled-base.directive';
+
+/**
+ * Child E Component - Uses Adopted StyleSheets
+ *
+ * This component extends StyledBaseDirective which applies shared base styles
+ * via adoptedStyleSheets. The base styles are NOT duplicated - they're shared!
+ *
+ * KEY: Uses ViewEncapsulation.ShadowDom to enable adoptedStyleSheets.
+ */
+@Component({
+    selector: 'app-child-e',
+    template: `
+        <div class="base-container child-e-wrapper">
+            <h3 class="base-title">Child E Component</h3>
+            <p class="base-content">Value: {{ value() }}</p>
+            <div class="child-e-extra">
+                <span class="child-e-badge">Component E (Adopted Styles)</span>
+            </div>
+            <button class="base-button" (click)="increment()">Increment (E)</button>
+        </div>
+    `,
+    // NO styleUrl or styles! Styles come from adoptedStyleSheets
+    encapsulation: ViewEncapsulation.ShadowDom,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ChildEComponent extends StyledBaseDirective {
+    protected readonly value = signal(0);
+
+    public increment() {
+        this.value.update(v => v + 1);
+    }
+
+    /**
+     * Child E specific styles - only the E-specific parts!
+     * Base styles (.base-container, .base-button, etc.) come from shared service.
+     */
+    protected override getChildCSS(): string {
+        return `
+            /* Child E specific styles ONLY */
+            .child-e-wrapper {
+                border-color: #ff5722;
+                background-color: #fbe9e7;
+            }
+
+            .child-e-extra {
+                margin: 15px 0;
+            }
+
+            .child-e-badge {
+                display: inline-block;
+                padding: 5px 12px;
+                background-color: #ff5722;
+                color: white;
+                border-radius: 16px;
+                font-size: 0.875rem;
+                font-weight: 500;
+            }
+        `;
+    }
+}
+
+
diff --git a/src/app/style-inheritance-test/child-f/child-f.component.ts b/src/app/style-inheritance-test/child-f/child-f.component.ts
new file mode 100644
index 00000000000..2e425d8da9d
--- /dev/null
+++ b/src/app/style-inheritance-test/child-f/child-f.component.ts
@@ -0,0 +1,49 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { BaseNoEncapsulationComponent } from '../base-no-encapsulation/base-no-encapsulation.component';
+
+/**
+ * Child F - Extends Base with ViewEncapsulation.None
+ *
+ * This child has NO styles of its own.
+ * It relies entirely on the base component's global styles.
+ *
+ * KEY QUESTION: If BaseNoEncapsulationComponent is never rendered,
+ * will its styles still be available for this child?
+ */
+@Component({
+    selector: 'app-child-f',
+    template: `
+        <div class="base-no-encap-container child-f-wrapper">
+            <h3 class="base-no-encap-title">Child F Component</h3>
+            <p class="base-no-encap-content">Value from parent: {{ value() }}</p>
+            <div class="child-f-extra">
+                <span class="child-f-badge">Component F (inherits None encapsulation)</span>
+            </div>
+            <button class="base-no-encap-button" (click)="increment()">Increment (F)</button>
+        </div>
+    `,
+    styles: [`
+        /* Only child-specific styles */
+        .child-f-wrapper {
+            border-color: #00bcd4 !important;
+            background-color: #e0f7fa !important;
+        }
+        .child-f-extra {
+            margin: 15px 0;
+        }
+        .child-f-badge {
+            display: inline-block;
+            padding: 5px 12px;
+            background-color: #00bcd4;
+            color: white;
+            border-radius: 16px;
+            font-size: 0.875rem;
+        }
+    `],
+    // Using default encapsulation (Emulated) for child
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ChildFComponent extends BaseNoEncapsulationComponent {
+    // Inherits value signal and increment() from base
+}
+
diff --git a/src/app/style-inheritance-test/shared-styles.service.ts b/src/app/style-inheritance-test/shared-styles.service.ts
new file mode 100644
index 00000000000..e52bd108ccf
--- /dev/null
+++ b/src/app/style-inheritance-test/shared-styles.service.ts
@@ -0,0 +1,88 @@
+import { Injectable } from '@angular/core';
+
+/**
+ * Shared Styles Service
+ *
+ * Creates CSSStyleSheet objects ONCE and shares them across components.
+ * Uses the Constructable StyleSheets API (adoptedStyleSheets).
+ *
+ * This avoids style duplication when multiple components need the same base styles.
+ */
+@Injectable({ providedIn: 'root' })
+export class SharedStylesService {
+    private _baseStyles: CSSStyleSheet | null = null;
+
+    /**
+     * Get the shared base styles as a CSSStyleSheet.
+     * The stylesheet is created once and reused.
+     */
+    public get baseStyles(): CSSStyleSheet {
+        if (!this._baseStyles) {
+            this._baseStyles = new CSSStyleSheet();
+            this._baseStyles.replaceSync(this.getBaseCSS());
+        }
+        return this._baseStyles;
+    }
+
+    /**
+     * Base CSS styles that will be shared across components.
+     * These styles are defined ONCE in memory, not duplicated per component.
+     */
+    private getBaseCSS(): string {
+        return `
+            /* ===========================================
+               SHARED BASE STYLES (from SharedStylesService)
+               These styles exist ONCE in memory!
+               =========================================== */
+            
+            .base-container {
+                padding: 20px;
+                border: 2px solid #3f51b5;
+                border-radius: 8px;
+                margin: 10px;
+                background-color: #f5f5f5;
+            }
+
+            .base-title {
+                color: #3f51b5;
+                font-size: 1.5rem;
+                margin: 0 0 10px 0;
+                font-weight: 600;
+            }
+
+            .base-content {
+                color: #333;
+                font-size: 1rem;
+                margin: 10px 0;
+            }
+
+            .base-button {
+                padding: 10px 20px;
+                background-color: #3f51b5;
+                color: white;
+                border: none;
+                border-radius: 4px;
+                cursor: pointer;
+                font-size: 1rem;
+                transition: background-color 0.3s ease;
+            }
+
+            .base-button:hover {
+                background-color: #303f9f;
+            }
+        `;
+    }
+
+    /**
+     * Create a new CSSStyleSheet from a CSS string.
+     * Useful for child-specific styles.
+     */
+    public createStyleSheet(css: string): CSSStyleSheet {
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(css);
+        return sheet;
+    }
+}
+
+
+
diff --git a/src/app/style-inheritance-test/style-inheritance-test.component.ts b/src/app/style-inheritance-test/style-inheritance-test.component.ts
new file mode 100644
index 00000000000..1b99b1b5e18
--- /dev/null
+++ b/src/app/style-inheritance-test/style-inheritance-test.component.ts
@@ -0,0 +1,623 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChildAComponent } from './child-a/child-a.component';
+import { ChildCComponent } from './child-c/child-c.component';
+import { ChildDComponent } from './child-d/child-d.component';
+import { ChildEComponent } from './child-e/child-e.component';
+import { ChildFComponent } from './child-f/child-f.component';
+
+/**
+ * Test Page Component
+ *
+ * Compares different approaches to style inheritance:
+ * 1. styleUrls array (duplicates styles)
+ * 2. Single styleUrl (missing base styles)
+ * 3. Adopted StyleSheets (NO duplication!) ✨
+ * 4. ViewEncapsulation.None (global styles)
+ */
+@Component({
+    selector: 'app-style-inheritance-test',
+    template: `
+        <div class="test-page">
+            <h1>Style Inheritance Test - Comparing Approaches</h1>
+            
+            <p class="description">
+                This page compares different ways to handle style inheritance in Angular when
+                child components extend a base component. <strong>The base component is NOT rendered
+                directly</strong> - only child components are used.
+            </p>
+
+            <!-- APPROACH 1: styleUrls array -->
+            <section class="test-section duplicated">
+                <h2>📋 Approach 1: styleUrls Array</h2>
+                <p class="approach-tag">Child A</p>
+                
+                <div class="approach-description">
+                    <p>
+                        This is the <strong>native Angular solution</strong>. You include the base component's 
+                        CSS file in the child's <code>styleUrls</code> array alongside the child's own styles.
+                    </p>
+                    <pre class="code-block">&#64;Component(&#123;
+    styleUrls: [
+        '../base/base.component.css',  // Base styles
+        './child-a.component.css'       // Child styles
+    ]
+&#125;)</pre>
+                </div>
+
+                <div class="pros-cons">
+                    <div class="pros">
+                        <h4>✅ Pros</h4>
+                        <ul>
+                            <li>Native Angular API - no extra code needed</li>
+                            <li>Works with default emulated encapsulation</li>
+                            <li>Full browser support</li>
+                            <li>Styles are properly scoped to component</li>
+                        </ul>
+                    </div>
+                    <div class="cons">
+                        <h4>❌ Cons</h4>
+                        <ul>
+                            <li><strong>Duplicates styles</strong> in each child's CSS bundle</li>
+                            <li>Increases bundle size with many children</li>
+                            <li>Must manually include base styles in every child</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="references">
+                    <h4>📚 References</h4>
+                    <ul>
+                        <li><a href="https://angular.dev/guide/components/styling" target="_blank">Angular Docs: Component Styling</a></li>
+                        <li><a href="https://angular.dev/api/core/Component#styleUrls" target="_blank">Angular API: &#64;Component styleUrls</a></li>
+                    </ul>
+                </div>
+
+                <div class="demo">
+                    <h4>Demo:</h4>
+                    <app-child-a />
+                </div>
+            </section>
+
+            <!-- APPROACH 2: Single styleUrl (broken) -->
+            <section class="test-section failure">
+                <h2>❌ Approach 2: Single styleUrl (No Inheritance)</h2>
+                <p class="approach-tag">Child C</p>
+                
+                <div class="approach-description">
+                    <p>
+                        This demonstrates what happens when you <strong>don't include base styles</strong>.
+                        Angular does NOT inherit styles through TypeScript class extension. The 
+                        <code>&#64;Component</code> decorator metadata (template, styles) is NOT inherited.
+                    </p>
+                    <pre class="code-block">&#64;Component(&#123;
+    styleUrl: './child-c.component.css'  // Only child styles!
+&#125;)
+export class ChildCComponent extends BaseComponent &#123;&#125;
+// BaseComponent styles are NOT inherited!</pre>
+                </div>
+
+                <div class="pros-cons">
+                    <div class="pros">
+                        <h4>✅ Pros</h4>
+                        <ul>
+                            <li>Smallest bundle size (no extra styles)</li>
+                            <li>Simple configuration</li>
+                        </ul>
+                    </div>
+                    <div class="cons">
+                        <h4>❌ Cons</h4>
+                        <ul>
+                            <li><strong>Base styles are missing!</strong></li>
+                            <li>Component renders without expected styling</li>
+                            <li>Not a viable solution for style inheritance</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="references">
+                    <h4>📚 References</h4>
+                    <ul>
+                        <li><a href="https://angular.dev/guide/components/inheritance" target="_blank">Angular Docs: Component Inheritance</a></li>
+                        <li><a href="https://github.com/angular/angular/issues/7773" target="_blank">GitHub Issue: Style inheritance discussion</a></li>
+                    </ul>
+                </div>
+
+                <div class="demo">
+                    <h4>Demo: (Notice missing padding, borders, button styles)</h4>
+                    <app-child-c />
+                </div>
+            </section>
+
+            <!-- APPROACH 3: Adopted StyleSheets (THE SOLUTION!) -->
+            <section class="test-section adopted">
+                <h2>✨ Approach 3: Adopted StyleSheets (Recommended)</h2>
+                <p class="approach-tag">Child D & E</p>
+                
+                <div class="approach-description">
+                    <p>
+                        The <strong>Constructable StyleSheets API</strong> (<code>adoptedStyleSheets</code>) 
+                        allows you to create a <code>CSSStyleSheet</code> object once and share the 
+                        <strong>same instance</strong> across multiple Shadow DOMs. No duplication!
+                    </p>
+                    <pre class="code-block">// Service creates stylesheet ONCE
+const sheet = new CSSStyleSheet();
+sheet.replaceSync('.base &#123; padding: 20px; &#125;');
+
+// Share SAME instance (not a copy!)
+childD.shadowRoot.adoptedStyleSheets = [sheet];
+childE.shadowRoot.adoptedStyleSheets = [sheet];</pre>
+                </div>
+
+                <div class="pros-cons">
+                    <div class="pros">
+                        <h4>✅ Pros</h4>
+                        <ul>
+                            <li><strong>No style duplication</strong> - same object shared</li>
+                            <li>True style encapsulation via Shadow DOM</li>
+                            <li>Performant - browser optimizes shared sheets</li>
+                            <li>Can dynamically update styles at runtime</li>
+                            <li>Used by Lit, Stencil, Shoelace, and other modern libraries</li>
+                        </ul>
+                    </div>
+                    <div class="cons">
+                        <h4>❌ Cons</h4>
+                        <ul>
+                            <li>Requires <code>ViewEncapsulation.ShadowDom</code></li>
+                            <li>More complex setup (service + directive)</li>
+                            <li>Shadow DOM can complicate global styling</li>
+                            <li>Older browser support (Chrome 73+, Firefox 101+, Safari 16.4+)</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="references">
+                    <h4>📚 References</h4>
+                    <ul>
+                        <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/adoptedStyleSheets" target="_blank">MDN: adoptedStyleSheets</a></li>
+                        <li><a href="https://web.dev/articles/constructable-stylesheets" target="_blank">web.dev: Constructable Stylesheets</a></li>
+                        <li><a href="https://developers.google.com/web/updates/2019/02/constructable-stylesheets" target="_blank">Google Developers: Constructable Stylesheets</a></li>
+                        <li><a href="https://lit.dev/docs/components/styles/" target="_blank">Lit Docs: Styles (uses adoptedStyleSheets)</a></li>
+                        <li><a href="https://caniuse.com/mdn-api_document_adoptedstylesheets" target="_blank">Can I Use: adoptedStyleSheets</a></li>
+                    </ul>
+                </div>
+
+                <div class="demo">
+                    <h4>Demo: (Both components share the SAME base stylesheet instance)</h4>
+                    <div class="adopted-demo">
+                        <app-child-d />
+                        <app-child-e />
+                    </div>
+                    <p class="solution-note">
+                        🔍 <strong>Verify in DevTools:</strong> Elements → Expand shadow root → 
+                        Both have identical <code>adoptedStyleSheets[0]</code> object reference.
+                    </p>
+                </div>
+            </section>
+
+            <!-- APPROACH 4: ViewEncapsulation.None -->
+            <section class="test-section encap-none">
+                <h2>🔓 Approach 4: ViewEncapsulation.None</h2>
+                <p class="approach-tag">Child F</p>
+                
+                <div class="approach-description">
+                    <p>
+                        When a component uses <code>ViewEncapsulation.None</code>, its styles become 
+                        <strong>global</strong> - they're injected into the document without any scoping.
+                    </p>
+                    <pre class="code-block">&#64;Component(&#123;
+    styles: ['.base-class &#123; padding: 20px; &#125;'],
+    encapsulation: ViewEncapsulation.None  // Styles are global!
+&#125;)
+export class BaseComponent &#123;&#125;
+
+// Child extends Base but Base is NEVER rendered
+export class ChildComponent extends BaseComponent &#123;&#125;</pre>
+                </div>
+
+                <div class="key-finding">
+                    <h4>🚨 KEY FINDING: Styles are NOT available!</h4>
+                    <p>
+                        Even with <code>ViewEncapsulation.None</code>, if the base component is 
+                        <strong>never instantiated/rendered</strong>, Angular will NOT include its 
+                        styles in the bundle. The styles are only injected when the component is 
+                        actually created.
+                    </p>
+                    <p>
+                        <strong>This means:</strong> Child F below will be MISSING the base styles 
+                        because <code>BaseNoEncapsulationComponent</code> is never rendered on this page.
+                    </p>
+                </div>
+
+                <div class="pros-cons">
+                    <div class="pros">
+                        <h4>✅ Pros (when base IS rendered)</h4>
+                        <ul>
+                            <li>No style duplication - styles are truly global</li>
+                            <li>Simple to implement</li>
+                            <li>Children automatically have access to styles</li>
+                            <li>Full browser support</li>
+                        </ul>
+                    </div>
+                    <div class="cons">
+                        <h4>❌ Cons</h4>
+                        <ul>
+                            <li><strong>Base must be rendered!</strong> Styles only load when component is created</li>
+                            <li>No encapsulation - styles can conflict with other components</li>
+                            <li>Risky for large applications</li>
+                            <li>Order-dependent - styles may override unexpectedly</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="references">
+                    <h4>📚 References</h4>
+                    <ul>
+                        <li><a href="https://angular.dev/api/core/ViewEncapsulation" target="_blank">Angular API: ViewEncapsulation</a></li>
+                        <li><a href="https://angular.dev/guide/components/styling#view-encapsulation" target="_blank">Angular Guide: View Encapsulation</a></li>
+                    </ul>
+                </div>
+
+                <div class="demo">
+                    <h4>Demo: (Notice the MISSING base styles - no purple border, no padding)</h4>
+                    <app-child-f />
+                    <p class="warning-note">
+                        ⚠️ <strong>As predicted:</strong> The base component's styles (.base-no-encap-container, 
+                        .base-no-encap-button) are NOT applied because BaseNoEncapsulationComponent was never rendered.
+                    </p>
+                </div>
+            </section>
+
+            <!-- Summary comparison table -->
+            <section class="summary-section">
+                <h2>📊 Summary Comparison</h2>
+                <table class="comparison-table">
+                    <thead>
+                        <tr>
+                            <th>Approach</th>
+                            <th>Duplication</th>
+                            <th>Encapsulation</th>
+                            <th>Complexity</th>
+                            <th>Browser Support</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td><code>styleUrls</code> array</td>
+                            <td class="bad">❌ Yes</td>
+                            <td class="good">✅ Emulated</td>
+                            <td class="good">⭐ Easy</td>
+                            <td class="good">✅ All</td>
+                        </tr>
+                        <tr>
+                            <td>Single <code>styleUrl</code></td>
+                            <td class="good">✅ None</td>
+                            <td class="good">✅ Emulated</td>
+                            <td class="good">⭐ Easy</td>
+                            <td class="good">✅ All</td>
+                        </tr>
+                        <tr class="highlight">
+                            <td><strong>Adopted StyleSheets</strong></td>
+                            <td class="good">✅ None</td>
+                            <td class="good">✅ Shadow DOM</td>
+                            <td class="neutral">⭐⭐ Medium</td>
+                            <td class="neutral">⚠️ Modern</td>
+                        </tr>
+                        <tr>
+                            <td>Global styles</td>
+                            <td class="good">✅ None</td>
+                            <td class="bad">❌ None</td>
+                            <td class="good">⭐ Easy</td>
+                            <td class="good">✅ All</td>
+                        </tr>
+                        <tr>
+                            <td>CSS Custom Properties</td>
+                            <td class="good">✅ None*</td>
+                            <td class="good">✅ Yes</td>
+                            <td class="neutral">⭐⭐ Medium</td>
+                            <td class="good">✅ All</td>
+                        </tr>
+                        <tr>
+                            <td><code>ViewEncapsulation.None</code></td>
+                            <td class="good">✅ None</td>
+                            <td class="bad">❌ None</td>
+                            <td class="good">⭐ Easy</td>
+                            <td class="neutral">⚠️ Base must render</td>
+                        </tr>
+                    </tbody>
+                </table>
+                <p class="table-note">* CSS Custom Properties don't duplicate variable definitions, but you still need to write the property declarations in each component.</p>
+                <p class="table-note"><strong>Important:</strong> ViewEncapsulation.None only works if the base component is actually rendered somewhere on the page!</p>
+            </section>
+
+            <!-- Other approaches -->
+            <section class="other-approaches">
+                <h2>🔧 Other Approaches Worth Mentioning</h2>
+                
+                <div class="approach-card">
+                    <h4>CSS Custom Properties (Variables)</h4>
+                    <p>Define variables globally, use in components. No value duplication, but declaration duplication remains.</p>
+                    <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties" target="_blank">MDN: CSS Custom Properties →</a>
+                </div>
+
+                <div class="approach-card">
+                    <h4>Global Styles (styles.scss)</h4>
+                    <p>Put shared styles in global stylesheet. No duplication but no encapsulation either.</p>
+                    <a href="https://angular.dev/guide/components/styling#global-styles" target="_blank">Angular: Global Styles →</a>
+                </div>
+
+                <div class="approach-card">
+                    <h4>ViewEncapsulation.None</h4>
+                    <p>Disable encapsulation so styles "leak" globally. Simple but risky for large apps.</p>
+                    <a href="https://angular.dev/api/core/ViewEncapsulation" target="_blank">Angular: ViewEncapsulation →</a>
+                </div>
+
+                <div class="approach-card">
+                    <h4>Sass Mixins / &#64;use</h4>
+                    <p>Reusable style mixins at build time. Convenient but DOES duplicate output CSS.</p>
+                    <a href="https://sass-lang.com/documentation/at-rules/mixin/" target="_blank">Sass: Mixins →</a>
+                </div>
+            </section>
+        </div>
+    `,
+    styles: [`
+        .test-page {
+            padding: 20px;
+            max-width: 1100px;
+            margin: 0 auto;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        }
+        h1 { color: #1a1a1a; margin-bottom: 10px; }
+        h2 { margin-top: 0; font-size: 1.3rem; margin-bottom: 15px; }
+        h4 { margin: 0 0 10px 0; font-size: 1rem; }
+        
+        .description {
+            color: #555;
+            margin-bottom: 30px;
+            background: #e3f2fd;
+            padding: 15px 20px;
+            border-radius: 8px;
+            line-height: 1.6;
+        }
+        
+        .approach-tag {
+            display: inline-block;
+            background: #333;
+            color: white;
+            padding: 3px 12px;
+            border-radius: 4px;
+            font-size: 0.8rem;
+            margin-bottom: 15px;
+        }
+        
+        .test-section {
+            margin-bottom: 40px;
+            padding: 25px;
+            background: #fafafa;
+            border-radius: 12px;
+        }
+        .test-section.duplicated {
+            border-left: 5px solid #ff9800;
+        }
+        .test-section.duplicated h2 { color: #e65100; }
+        .test-section.failure {
+            border-left: 5px solid #f44336;
+        }
+        .test-section.failure h2 { color: #c62828; }
+        .test-section.adopted {
+            border-left: 5px solid #4caf50;
+            background: #f1f8e9;
+        }
+        .test-section.adopted h2 { color: #2e7d32; }
+        .test-section.encap-none {
+            border-left: 5px solid #673ab7;
+            background: #f3e5f5;
+        }
+        .test-section.encap-none h2 { color: #512da8; }
+        
+        .key-finding {
+            background: #ffebee;
+            border: 2px solid #f44336;
+            padding: 15px 20px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+        }
+        .key-finding h4 { color: #c62828; margin-bottom: 10px; }
+        .key-finding p { color: #555; margin: 0 0 10px 0; line-height: 1.6; }
+        .key-finding p:last-child { margin-bottom: 0; }
+        .key-finding code {
+            background: #ffcdd2;
+            padding: 2px 6px;
+            border-radius: 4px;
+        }
+        
+        .warning-note {
+            margin-top: 15px;
+            padding: 12px 15px;
+            background: #fff3e0;
+            border-radius: 6px;
+            font-size: 0.9rem;
+            color: #e65100;
+            border-left: 3px solid #ff9800;
+        }
+        
+        .approach-description {
+            background: white;
+            padding: 15px 20px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            line-height: 1.6;
+        }
+        .approach-description p { margin: 0 0 10px 0; color: #444; }
+        .approach-description code {
+            background: #f5f5f5;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-size: 0.9em;
+            color: #d32f2f;
+        }
+        
+        .code-block {
+            background: #263238;
+            color: #aed581;
+            padding: 15px;
+            border-radius: 6px;
+            overflow-x: auto;
+            font-size: 0.85rem;
+            font-family: 'Fira Code', 'Consolas', monospace;
+            margin: 10px 0 0 0;
+        }
+        
+        .pros-cons {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+            margin-bottom: 20px;
+        }
+        .pros, .cons {
+            background: white;
+            padding: 15px 20px;
+            border-radius: 8px;
+        }
+        .pros { border-top: 3px solid #4caf50; }
+        .cons { border-top: 3px solid #f44336; }
+        .pros h4 { color: #2e7d32; }
+        .cons h4 { color: #c62828; }
+        .pros ul, .cons ul {
+            margin: 0;
+            padding-left: 20px;
+            color: #555;
+            line-height: 1.8;
+        }
+        
+        .references {
+            background: #fff8e1;
+            padding: 15px 20px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+        }
+        .references h4 { color: #f57c00; }
+        .references ul {
+            margin: 0;
+            padding-left: 20px;
+            line-height: 1.8;
+        }
+        .references a {
+            color: #1976d2;
+            text-decoration: none;
+        }
+        .references a:hover { text-decoration: underline; }
+        
+        .demo {
+            background: white;
+            padding: 15px 20px;
+            border-radius: 8px;
+            border: 1px dashed #ccc;
+        }
+        .demo h4 { color: #666; font-weight: 500; }
+        
+        .adopted-demo {
+            display: flex;
+            gap: 20px;
+            flex-wrap: wrap;
+        }
+        
+        .solution-note {
+            margin-top: 15px;
+            padding: 12px 15px;
+            background: #c8e6c9;
+            border-radius: 6px;
+            font-size: 0.9rem;
+            color: #1b5e20;
+        }
+        .solution-note code {
+            background: rgba(0,0,0,0.1);
+            padding: 2px 6px;
+            border-radius: 4px;
+        }
+        
+        .summary-section {
+            background: #f5f5f5;
+            padding: 25px;
+            border-radius: 12px;
+            margin-bottom: 40px;
+        }
+        .summary-section h2 { color: #333; }
+        
+        .comparison-table {
+            width: 100%;
+            border-collapse: collapse;
+            background: white;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        }
+        .comparison-table th, .comparison-table td {
+            padding: 12px 15px;
+            text-align: left;
+            border-bottom: 1px solid #eee;
+        }
+        .comparison-table th {
+            background: #333;
+            color: white;
+            font-weight: 500;
+        }
+        .comparison-table tr:last-child td { border-bottom: none; }
+        .comparison-table tr.highlight { background: #e8f5e9; }
+        .comparison-table code {
+            background: #f5f5f5;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-size: 0.85em;
+        }
+        .comparison-table .good { color: #2e7d32; }
+        .comparison-table .bad { color: #c62828; }
+        .comparison-table .neutral { color: #f57c00; }
+        
+        .table-note {
+            margin-top: 10px;
+            font-size: 0.85rem;
+            color: #666;
+            font-style: italic;
+        }
+        
+        .other-approaches {
+            background: #fafafa;
+            padding: 25px;
+            border-radius: 12px;
+        }
+        .other-approaches h2 { color: #333; margin-bottom: 20px; }
+        
+        .approach-card {
+            background: white;
+            padding: 15px 20px;
+            border-radius: 8px;
+            margin-bottom: 15px;
+            border-left: 4px solid #9e9e9e;
+        }
+        .approach-card h4 { color: #333; margin-bottom: 8px; }
+        .approach-card p { 
+            color: #666; 
+            margin: 0 0 10px 0;
+            line-height: 1.5;
+        }
+        .approach-card a {
+            color: #1976d2;
+            text-decoration: none;
+            font-size: 0.9rem;
+        }
+        .approach-card a:hover { text-decoration: underline; }
+
+        @media (max-width: 768px) {
+            .pros-cons {
+                grid-template-columns: 1fr;
+            }
+            .adopted-demo {
+                flex-direction: column;
+            }
+        }
+    `],
+    imports: [ChildAComponent, ChildCComponent, ChildDComponent, ChildEComponent, ChildFComponent],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class StyleInheritanceTestComponent {}
+
diff --git a/src/app/style-inheritance-test/styled-base.directive.ts b/src/app/style-inheritance-test/styled-base.directive.ts
new file mode 100644
index 00000000000..9b605643586
--- /dev/null
+++ b/src/app/style-inheritance-test/styled-base.directive.ts
@@ -0,0 +1,51 @@
+import { Directive, ElementRef, inject, OnInit } from '@angular/core';
+import { SharedStylesService } from './shared-styles.service';
+
+/**
+ * Styled Base Directive
+ *
+ * A base directive that automatically applies shared styles via adoptedStyleSheets.
+ * Components that extend this will automatically get the base styles WITHOUT duplication.
+ *
+ * IMPORTANT: Child components MUST use ViewEncapsulation.ShadowDom for this to work!
+ */
+@Directive()
+export abstract class StyledBaseDirective implements OnInit {
+    protected elementRef = inject(ElementRef);
+    protected sharedStyles = inject(SharedStylesService);
+
+    /**
+     * Override this in child classes to provide child-specific CSS.
+     */
+    protected abstract getChildCSS(): string;
+
+    public ngOnInit() {
+        this.applyStyles();
+    }
+
+    /**
+     * Apply both shared base styles and child-specific styles to the shadow root.
+     * The base styles are SHARED (same CSSStyleSheet instance), not duplicated.
+     */
+    protected applyStyles() {
+        const shadowRoot = this.elementRef.nativeElement.shadowRoot;
+
+        if (shadowRoot) {
+            // Create child-specific stylesheet
+            const childStyleSheet = this.sharedStyles.createStyleSheet(this.getChildCSS());
+
+            // Apply BOTH stylesheets - base styles are shared, not duplicated!
+            shadowRoot.adoptedStyleSheets = [
+                this.sharedStyles.baseStyles,  // Shared instance - no duplication!
+                childStyleSheet                 // Child-specific styles
+            ];
+        } else {
+            console.warn(
+                'StyledBaseDirective: No shadow root found. ' +
+                'Make sure to use ViewEncapsulation.ShadowDom in your component.'
+            );
+        }
+    }
+}
+
+