fix(core): ensure host bindings in inherited directives use correct LView slots

Previously, when a directive extended another directive and both had host bindings using instructions with relative offsets (like `pureFunction`), they would share the same `bindingRoot` in the `LView`.

Author: aparzi

packages/core/src/render3/features/inherit_definition_feature.ts

@@ -22,6 +22,7 @@ import {
 import {TAttributes} from '../interfaces/node';
 import {isComponentDef} from '../interfaces/type_checks';
 import {mergeHostAttrs} from '../util/attrs_utils';
+import {getBindingRoot, getCurrentDirectiveIndex, setBindingRootForHostBindings} from '../state';
 import {stringifyForError} from '../util/stringify_utils';
 
 export function getSuperType(
@@ -76,7 +77,7 @@ export function ɵɵInheritDefinitionFeature(
 
         // Merge hostBindings
         const superHostBindings = superDef.hostBindings;
-        superHostBindings && inheritHostBindings(definition, superHostBindings);
+        superHostBindings && inheritHostBindings(definition, superHostBindings, superDef.hostVars);
 
         // Merge queries
         const superViewQuery = superDef.viewQuery;
@@ -208,12 +209,19 @@ function inheritContentQueries(
 function inheritHostBindings(
   definition: WritableDef,
   superHostBindings: HostBindingsFunction<any>,
+  superHostVars: number,
 ) {
   const prevHostBindings = definition.hostBindings;
   if (prevHostBindings) {
     definition.hostBindings = (rf: RenderFlags, ctx: any) => {
       superHostBindings(rf, ctx);
-      prevHostBindings(rf, ctx);
+      const oldBindRoot = getBindingRoot();
+      setBindingRootForHostBindings(oldBindRoot + superHostVars, getCurrentDirectiveIndex());
+      try {
+        prevHostBindings(rf, ctx);
+      } finally {
+        setBindingRootForHostBindings(oldBindRoot, getCurrentDirectiveIndex());
+      }
     };
   } else {
     definition.hostBindings = superHostBindings;

packages/core/test/acceptance/inherit_definition_feature_spec.ts

@@ -5964,4 +5964,40 @@ describe('inheritance', () => {
     // TODO: sub has ViewChildren and super has ContentChildren on same property
     // TODO: sub has ContentChild and super has ContentChildren on same property
   });
+
+  it('should not overwrite LView slots when extending a directive with host bindings (issue #66263)', () => {
+    @Directive({
+      host: {
+        '[attr.parent]': '["P"][0]',
+      },
+      standalone: true,
+    })
+    class ParentDir {}
+
+    @Directive({
+      selector: 'some-dir',
+      host: {
+        '[attr.child]': '["C"][0]',
+      },
+      standalone: true,
+    })
+    class SomeDir extends ParentDir {}
+
+    @Component({
+      selector: 'app-root',
+      standalone: true,
+      imports: [SomeDir],
+      template: `
+        <some-dir></some-dir>
+      `,
+    })
+    class App {}
+
+    const fixture = TestBed.createComponent(App);
+    fixture.detectChanges();
+
+    const element = fixture.nativeElement.querySelector('some-dir');
+    expect(element.getAttribute('parent')).toBe('P');
+    expect(element.getAttribute('child')).toBe('C');
+  });
 });