fix(cdk/drag-drop): handle not working when it has a child inside sha…

…dow DOM

Fixes that the children of the drag handle inside a shadow root weren't being detected. The problem was that we were using `_getEventTarget` to resolve the actual event target and using `contains` to verify that it's inside the handle. Since `contains` doesn't descend into shadow root, the call failed. These changes remove the `_getEventTarget` call since we can use the event `target` directly.

Fixes #23680.

(cherry picked from commit b9cda57)

src/cdk/drag-drop/directives/drag.spec.ts

@@ -1581,6 +1581,26 @@ describe('CdkDrag', () => {
         flush();
       }).toThrowError(/^cdkDragHandle must be attached to an element node/);
     }));
+
+    it('should be able to drag an element using a handle with a shadow DOM child', fakeAsync(() => {
+      if (!_supportsShadowDom()) {
+        return;
+      }
+
+      const fixture = createComponent(
+        StandaloneDraggableWithShadowInsideHandle,
+        undefined,
+        undefined,
+        [ShadowWrapper],
+      );
+      fixture.detectChanges();
+      const dragElement = fixture.componentInstance.dragElement.nativeElement;
+      const handleChild = fixture.componentInstance.handleChild.nativeElement;
+
+      expect(dragElement.style.transform).toBeFalsy();
+      dragElementViaMouse(fixture, handleChild, 50, 100);
+      expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)');
+    }));
   });
 
   describe('in a drop container', () => {
@@ -6461,6 +6481,29 @@ class StandaloneDraggableWithIndirectHandle {
   @ViewChild('handleElement') handleElement: ElementRef<HTMLElement>;
 }
 
+@Component({
+  selector: 'shadow-wrapper',
+  template: '<ng-content></ng-content>',
+  encapsulation: ViewEncapsulation.ShadowDom,
+})
+class ShadowWrapper {}
+
+@Component({
+  template: `
+    <div #dragElement cdkDrag style="width: 100px; height: 100px; background: red;">
+      <div cdkDragHandle style="width: 10px; height: 10px;">
+        <shadow-wrapper>
+          <div #handleChild style="width: 10px; height: 10px; background: green;"></div>
+        </shadow-wrapper>
+      </div>
+    </div>
+  `,
+})
+class StandaloneDraggableWithShadowInsideHandle {
+  @ViewChild('dragElement') dragElement: ElementRef<HTMLElement>;
+  @ViewChild('handleChild') handleChild: ElementRef<HTMLElement>;
+}
+
 @Component({
   encapsulation: ViewEncapsulation.None,
   styles: [

src/cdk/drag-drop/drag-ref.ts

@@ -628,8 +628,7 @@ export class DragRef<T = any> {
     // Delegate the event based on whether it started from a handle or the element itself.
     if (this._handles.length) {
       const targetHandle = this._handles.find(handle => {
-        const target = _getEventTarget(event);
-        return !!target && (target === handle || handle.contains(target as HTMLElement));
+        return event.target && (event.target === handle || handle.contains(event.target as Node));
       });
 
       if (targetHandle && !this._disabledHandles.has(targetHandle) && !this.disabled) {