Description

GridStack currently has limited shadow DOM support, which creates challenges when using it
with Web Components. While it's possible to work around the drag-and-drop functionality,
restricting drag to a specific handle element inside a shadow DOM component prevents natural
scrolling from working properly.

Current Behavior

GridStack's handle selector (e.g., .drag-handle) cannot penetrate shadow DOM boundaries,
making it impossible to specify a handle element that lives inside a Web Component's shadow
root.

Workaround Attempted

To restrict dragging to only a specific handle within a shadow DOM component, I implemented
touch event interception:

// Inside the Web Component
private _handleTouchStart = (event: TouchEvent) => {
const path = event.composedPath();

// Check if touch is on the drag handle
const isDragHandle = path.some(element => {
 if (element instanceof HTMLElement) {
 return element.classList.contains('drag-handle');
 }
 return false;
});
// Stop propagation if not on drag handle to prevent GridStack drag
if (!isDragHandle) {
 event.stopPropagation();
}

};

// In component initialization
this.shadowRoot.addEventListener('touchstart', this._handleTouchStart, {
capture: true,
passive:

The Problem

While this successfully restricts dragging to the handle element, it breaks natural browser
scrolling on the component. The stopPropagation() call that prevents unwanted drag initiation
also seems to interfere with the browser's native scroll gesture recognition.

Expected Behavior

Ideally, GridStack would support:

1. Shadow DOM-aware handle selection (perhaps accepting an element reference instead of just a selector string)
2. A way to exclude certain elements from drag initiation that works across shadow boundaries
3. Proper separation between drag initiation and scroll gesture handling

Use Case

Modern web applications increasingly use Web Components with shadow DOM for encapsulation. In
my case, I have a grid of content cards where:

• Each card is a Web Component with shadow DOM
• Cards should only be draggable from a specific handle button
• The rest of the card content should be scrollable and

Environment

• GridStack version: 12.3.1
• Browser: Mobile Safari / Chrome on iOS/Android
• Using Web Components with shadow DOM

Suggested Solutions

Accept element references: Allow handle option to accept HTMLElement references in addition
to selector strings.

Would love to hear if there are any recommended patterns for this use case or if shadow DOM
support improvements are on the roadmap.