docs: ExperimentalIsolatedShadowDom mentions

cexbrayat · thePunderWoman · commit f550f4ab4abd · 2025-11-14T16:41:16.000Z
(cherry picked from commit c137f1f)
diff --git a/adev/shared-docs/pipeline/api-gen/rendering/test/fake-cli-entries.json b/adev/shared-docs/pipeline/api-gen/rendering/test/fake-cli-entries.json
@@ -178,7 +178,7 @@
             "Emulated",
             "None",
             "ShadowDom",
-            "IsolatedShadowDom"
+            "ExperimentalIsolatedShadowDom"
           ],
           "description": "The view encapsulation strategy to use in the new application."
         }
@@ -369,7 +369,7 @@
             "Emulated",
             "None",
             "ShadowDom",
-            "IsolatedShadowDom"
+            "ExperimentalIsolatedShadowDom"
           ],
           "description": "The view encapsulation strategy to use in the new component."
         }
diff --git a/adev/src/content/guide/animations/complex-sequences.md b/adev/src/content/guide/animations/complex-sequences.md
@@ -121,11 +121,11 @@ IMPORTANT: If you need to animate the items of an `*ngFor` list and there is a p
 
 ## Animations and Component View Encapsulation
 
-Angular animations are based on the components DOM structure and do not directly take [View Encapsulation](guide/components/styling#style-scoping) into account, this means that components using `ViewEncapsulation.Emulated` behave exactly as if they were using `ViewEncapsulation.None` (`ViewEncapsulation.ShadowDom` and `ViewEncapsulation.IsolatedShadowDom` behave differently as we'll discuss shortly).
+Angular animations are based on the components DOM structure and do not directly take [View Encapsulation](guide/components/styling#style-scoping) into account, this means that components using `ViewEncapsulation.Emulated` behave exactly as if they were using `ViewEncapsulation.None` (`ViewEncapsulation.ShadowDom` and `ViewEncapsulation.ExperimentalIsolatedShadowDom` behave differently as we'll discuss shortly).
 
 For example if the `query()` function (which you'll see more of in the rest of the Animations guide) were to be applied at the top of a tree of components using the emulated view encapsulation, such query would be able to identify (and thus animate) DOM elements on any depth of the tree.
 
-On the other hand the `ViewEncapsulation.ShadowDom` and `ViewEncapsulation.IsolatedShadowDom` changes the component's DOM structure by "hiding" DOM elements inside [`ShadowRoot`](https://developer.mozilla.org/docs/Web/API/ShadowRoot) elements. Such DOM manipulations do prevent some of the animations implementation to work properly since it relies on simple DOM structures and doesn't take `ShadowRoot` elements into account. Therefore it is advised to avoid applying animations to views incorporating components using the ShadowDom view encapsulation.
+On the other hand the `ViewEncapsulation.ShadowDom` and `ViewEncapsulation.ExperimentalIsolatedShadowDom` changes the component's DOM structure by "hiding" DOM elements inside [`ShadowRoot`](https://developer.mozilla.org/docs/Web/API/ShadowRoot) elements. Such DOM manipulations do prevent some of the animations implementation to work properly since it relies on simple DOM structures and doesn't take `ShadowRoot` elements into account. Therefore it is advised to avoid applying animations to views incorporating components using the ShadowDom view encapsulation.
 
 ## Animation sequence summary
 
diff --git a/adev/src/content/guide/components/styling.md b/adev/src/content/guide/components/styling.md
@@ -36,7 +36,7 @@ and [stylus](https://stylus-lang.com).
 ## Style scoping
 
 Every component has a **view encapsulation** setting that determines how the framework scopes a
-component's styles. There are four view encapsulation modes: `Emulated`, `ShadowDom`, `IsolatedShadowDom`, and `None`.
+component's styles. There are four view encapsulation modes: `Emulated`, `ShadowDom`, `ExperimentalIsolatedShadowDom`, and `None`.
 You can specify the mode in the `@Component` decorator:
 
 <docs-code language="angular-ts" highlight="[3]">
@@ -91,7 +91,7 @@ with [the `<slot>` API](https://developer.mozilla.org/docs/Web/Web_Components/Us
 and how browser developer tools show elements. Always understand the full implications of using
 Shadow DOM in your application before enabling this option.
 
-### ViewEncapsulation.IsolatedShadowDom
+### ViewEncapsulation.ExperimentalIsolatedShadowDom
 
 Behaves as above, except this mode strictly guarantees that _only_ that component's styles apply to elements in the
 component's template. Global styles cannot affect elements in a shadow tree and styles inside the
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/component-metadata/component-metadata.component.ts b/devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-tab-header/component-metadata/component-metadata.component.ts
@@ -36,7 +36,13 @@ export class ComponentMetadataComponent {
 
   private _nestedProps = inject(ElementPropertyResolver);
 
-  angularViewEncapsulationModes = ['Emulated', 'Native', 'None', 'ShadowDom', 'IsolatedShadowDom'];
+  angularViewEncapsulationModes = [
+    'Emulated',
+    'Native',
+    'None',
+    'ShadowDom',
+    'ExperimentalIsolatedShadowDom',
+  ];
   acxViewEncapsulationModes = ['Emulated', 'None'];
 
   readonly controller = computed(() => {
diff --git a/packages/platform-browser/src/dom/dom_renderer.ts b/packages/platform-browser/src/dom/dom_renderer.ts
@@ -522,7 +522,7 @@ class ShadowDomRenderer extends DefaultDomRenderer2 {
     this.shadowRoot = (hostEl as any).attachShadow({mode: 'open'});
 
     // SharedStylesHost is used to add styles to the shadow root by ShadowDom.
-    // This is optional as it is not used by IsolatedShadowDom.
+    // This is optional as it is not used by ExperimentalIsolatedShadowDom.
     if (this.sharedStylesHost) {
       this.sharedStylesHost.addHost(this.shadowRoot);
     }
diff --git a/packages/platform-browser/test/dom/dom_renderer_spec.ts b/packages/platform-browser/test/dom/dom_renderer_spec.ts
@@ -159,7 +159,7 @@ describe('DefaultDomRendererV2', () => {
     expect(window.getComputedStyle(none).backgroundColor).toEqual('rgba(0, 0, 0, 0)');
   });
 
-  it('shadow components should not be polluted by child components styles when using IsolatedShadowDom', () => {
+  it('shadow components should not be polluted by child components styles when using ExperimentalIsolatedShadowDom', () => {
     const fixture = TestBed.createComponent(IsolatedShadowComponentParentApp);
     fixture.detectChanges();
 

Original file line number	Diff line number	Diff line change
`@@ -522,7 +522,7 @@ class ShadowDomRenderer extends DefaultDomRenderer2 {`
`522`	`522`	`this.shadowRoot = (hostEl as any).attachShadow({mode: 'open'});`
`523`	`523`
`524`	`524`	`// SharedStylesHost is used to add styles to the shadow root by ShadowDom.`
`525`		`- // This is optional as it is not used by IsolatedShadowDom.`
	`525`	`+ // This is optional as it is not used by ExperimentalIsolatedShadowDom.`
`526`	`526`	`if (this.sharedStylesHost) {`
`527`	`527`	`this.sharedStylesHost.addHost(this.shadowRoot);`
`528`	`528`	`}`