From d47a197a9b2ae789875aa35d2fa9663df2d5fd7c Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Fri, 13 Mar 2026 12:04:10 +0200
Subject: [PATCH 1/3] feat(style-inheritance-test): implement and compare
 different style inheritance strategies

Add components to demonstrate three approaches to style inheritance:
1. `styleUrls` array (duplicated styles).
2. Single `styleUrl` (no inheritance, missing styles).
3. Adopted StyleSheets API (shared styles without duplication).

Includes supporting shared services, directives, and detailed documentation.
---
 src/app/app.routes.ts                         |   5 +
 src/app/style-inheritance-test/RESEARCH.md    | 204 +++++++
 .../base/base.component.css                   |  41 ++
 .../base/base.component.ts                    |  26 +
 .../child-a/child-a.component.css             |  27 +
 .../child-a/child-a.component.ts              |  33 ++
 .../child-c/child-c.component.css             |  37 ++
 .../child-c/child-c.component.ts              |  32 ++
 .../child-d/child-d.component.ts              |  64 +++
 .../child-e/child-e.component.ts              |  64 +++
 .../shared-styles.service.ts                  |  88 +++
 .../style-inheritance-test.component.ts       | 509 ++++++++++++++++++
 .../styled-base.directive.ts                  |  51 ++
 13 files changed, 1181 insertions(+)
 create mode 100644 src/app/style-inheritance-test/RESEARCH.md
 create mode 100644 src/app/style-inheritance-test/base/base.component.css
 create mode 100644 src/app/style-inheritance-test/base/base.component.ts
 create mode 100644 src/app/style-inheritance-test/child-a/child-a.component.css
 create mode 100644 src/app/style-inheritance-test/child-a/child-a.component.ts
 create mode 100644 src/app/style-inheritance-test/child-c/child-c.component.css
 create mode 100644 src/app/style-inheritance-test/child-c/child-c.component.ts
 create mode 100644 src/app/style-inheritance-test/child-d/child-d.component.ts
 create mode 100644 src/app/style-inheritance-test/child-e/child-e.component.ts
 create mode 100644 src/app/style-inheritance-test/shared-styles.service.ts
 create mode 100644 src/app/style-inheritance-test/style-inheritance-test.component.ts
 create mode 100644 src/app/style-inheritance-test/styled-base.directive.ts

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..55db349b50d
--- /dev/null
+++ b/src/app/style-inheritance-test/RESEARCH.md
@@ -0,0 +1,204 @@
+# 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+
+
+---
+
+## 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/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/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..18995971d1f
--- /dev/null
+++ b/src/app/style-inheritance-test/style-inheritance-test.component.ts
@@ -0,0 +1,509 @@
+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';
+
+/**
+ * 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!) ✨
+ */
+@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>
+
+            <!-- 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>
+                    </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>
+            </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; }
+        
+        .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],
+    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.'
+            );
+        }
+    }
+}
+
+

From 363096ebf713f4dc79cddc18f27bfa1bbd944346 Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Fri, 13 Mar 2026 12:08:28 +0200
Subject: [PATCH 2/3] docs(style-inheritance-test): add references for
 adoptedStyleSheets research

Expand documentation with official resources, community discussions, and framework implementations related to adoptedStyleSheets. Includes links to MDN, web.dev, Angular documentation, and GitHub discussions for further exploration.
---
 src/app/style-inheritance-test/RESEARCH.md | 43 ++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/src/app/style-inheritance-test/RESEARCH.md b/src/app/style-inheritance-test/RESEARCH.md
index 55db349b50d..1f33ab06fc7 100644
--- a/src/app/style-inheritance-test/RESEARCH.md
+++ b/src/app/style-inheritance-test/RESEARCH.md
@@ -27,6 +27,49 @@ element2.shadowRoot.adoptedStyleSheets = [sheet];
 - ✅ 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

From 2d1e83534af89afcfa35d6a8fca6d7255f07ad1c Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Fri, 13 Mar 2026 13:20:13 +0200
Subject: [PATCH 3/3] feat(style-inheritance-test): add example for
 ViewEncapsulation.None styling experiment

Introduce `BaseNoEncapsulationComponent` with `ViewEncapsulation.None` to test global styling behavior. Added `ChildFComponent` to explore inheritance from unrendered base component. Enhanced documentation and page layout to include findings, pros, cons, and references.
---
 .../base-no-encapsulation.component.ts        |  69 +++++++++++
 .../child-f/child-f.component.ts              |  49 ++++++++
 .../style-inheritance-test.component.ts       | 116 +++++++++++++++++-
 3 files changed, 233 insertions(+), 1 deletion(-)
 create mode 100644 src/app/style-inheritance-test/base-no-encapsulation/base-no-encapsulation.component.ts
 create mode 100644 src/app/style-inheritance-test/child-f/child-f.component.ts

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/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/style-inheritance-test.component.ts b/src/app/style-inheritance-test/style-inheritance-test.component.ts
index 18995971d1f..1b99b1b5e18 100644
--- a/src/app/style-inheritance-test/style-inheritance-test.component.ts
+++ b/src/app/style-inheritance-test/style-inheritance-test.component.ts
@@ -3,6 +3,7 @@ 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
@@ -11,6 +12,7 @@ import { ChildEComponent } from './child-e/child-e.component';
  * 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',
@@ -192,6 +194,79 @@ childE.shadowRoot.adoptedStyleSheets = [sheet];</pre>
                 </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>
@@ -241,9 +316,17 @@ childE.shadowRoot.adoptedStyleSheets = [sheet];</pre>
                             <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 -->
@@ -325,6 +408,37 @@ childE.shadowRoot.adoptedStyleSheets = [sheet];</pre>
             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;
@@ -502,7 +616,7 @@ childE.shadowRoot.adoptedStyleSheets = [sheet];</pre>
             }
         }
     `],
-    imports: [ChildAComponent, ChildCComponent, ChildDComponent, ChildEComponent],
+    imports: [ChildAComponent, ChildCComponent, ChildDComponent, ChildEComponent, ChildFComponent],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class StyleInheritanceTestComponent {}