Repository: material-ui
Issue: Swipe/touch support in web components
Labels: package: material-ui,component: SwipeableDrawer,enhancement

### Duplicates

- [X] I have searched the existing issues

### Summary

Swipeevents / Touchevents don't work inside a web component. In SwipeableDrawer.js there is the handleBodyTouchStart handler and the condition:

```js
 // logic for if swipe should be ignored:
 // if disableSwipeToOpen
 // if target != swipeArea, and target is not a child of paper ref
 // if is a child of paper ref, and `allowSwipeInChildren` does not allow it
 if (disableSwipeToOpen || !(nativeEvent.target === swipeAreaRef.current || (_paperRef$current = paperRef.current) != null && _paperRef$current.contains(nativeEvent.target) && (typeof allowSwipeInChildren === 'function' ? allowSwipeInChildren(nativeEvent, swipeAreaRef.current, paperRef.current) : allowSwipeInChildren))) {
     return;
 }
```
      
This prevents the drawer from opening because the native element is my web component. My local fix is this:
 
 
```js
  const handleBodyTouchStart = useEventCallback(nativeEvent => {
    // We are not supposed to handle this touch move.
    // Example of use case: ignore the event if there is a Slider.
    if (nativeEvent.defaultPrevented) {
      return;
    }

    // We can only have one node at the time claiming ownership for handling the swipe.
    if (nativeEvent.defaultMuiPrevented) {
      return;
    }

    // At least one element clogs the drawer interaction zone.
    if (open && (hideBackdrop || !backdropRef.current.contains(nativeEvent.target)) && !paperRef.current.contains(nativeEvent.target)) {
      return;
    }
    const anchorRtl = getAnchor(theme, anchor);
    const horizontalSwipe = isHorizontal(anchor);
    const currentX = calculateCurrentX(anchorRtl, nativeEvent.touches, ownerDocument(nativeEvent.currentTarget));
    const currentY = calculateCurrentY(anchorRtl, nativeEvent.touches, ownerWindow(nativeEvent.currentTarget));
    if (!open) {
      var _paperRef$current;
      var isWebComponent = nativeEvent.target.tagName.includes('-');
      // logic for if swipe should be ignored:
      // if disableSwipeToOpen
      // if target != swipeArea, and target is not a child of paper ref
      // if is a child of paper ref, and `allowSwipeInChildren` does not allow it
      if (disableSwipeToOpen || !((nativeEvent.target === swipeAreaRef.current || isWebComponent) || (_paperRef$current = paperRef.current) != null && _paperRef$current.contains(nativeEvent.target) && (typeof allowSwipeInChildren === 'function' ? allowSwipeInChildren(nativeEvent, swipeAreaRef.current, paperRef.current) : allowSwipeInChildren))) {
        return;
      }
      if (horizontalSwipe) {
        if (currentX > swipeAreaWidth) {
          return;
        }
      } else if (currentY > swipeAreaWidth) {
        return;
      }
    }
    nativeEvent.defaultMuiPrevented = true;
    claimedSwipeInstance = null;
    swipeInstance.current.startX = currentX;
    swipeInstance.current.startY = currentY;
    startMaybeSwiping();
  });
```

### Examples

_No response_

### Motivation

_No response_

**Search keywords**: