{"record":{"id":"751fd29587eefc23","repo":"angular/components","slug":"invalid-dom-structure-for-drop-list-alternate-con","errorCode":null,"errorMessage":"Invalid DOM structure for drop list. Alternate container element must be a descendant of the drop list.","messagePattern":"Invalid DOM structure for drop list\\. Alternate container element must be a descendant of the drop list\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/cdk/drag-drop/drop-list-ref.ts","lineNumber":423,"sourceCode":"   * Configures the drop list so that a different element is used as the container for the\n   * dragged items. This is useful for the cases when one might not have control over the\n   * full DOM that sets up the dragging.\n   * Note that the alternate container needs to be a descendant of the drop list.\n   * @param container New element container to be assigned.\n   */\n  withElementContainer(container: HTMLElement): this {\n    if (container === this._container) {\n      return this;\n    }\n\n    const element = coerceElement(this.element);\n\n    if (\n      (typeof ngDevMode === 'undefined' || ngDevMode) &&\n      container !== element &&\n      !element.contains(container)\n    ) {\n      throw new Error(\n        'Invalid DOM structure for drop list. Alternate container element must be a descendant of the drop list.',\n      );\n    }\n\n    const oldContainerIndex = this._scrollableElements.indexOf(this._container);\n    const newContainerIndex = this._scrollableElements.indexOf(container);\n\n    if (oldContainerIndex > -1) {\n      this._scrollableElements.splice(oldContainerIndex, 1);\n    }\n\n    if (newContainerIndex > -1) {\n      this._scrollableElements.splice(newContainerIndex, 1);\n    }\n\n    if (this._sortStrategy) {\n      this._sortStrategy.withElementContainer(container);\n    }","sourceCodeStart":405,"sourceCodeEnd":441,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/cdk/drag-drop/drop-list-ref.ts#L405-L441","documentation":"withElementContainer lets a CdkDropListRef use an alternate container element for its drag items. As a dev-mode structural check, the container must either be the drop list element itself or a descendant of it; otherwise scrolling/bounds logic breaks, so the ref throws.","triggerScenarios":"Calling dropListRef.withElementContainer(el) (directly or via elementContainerSelector resolution) with an element that is not the drop list element and is not contained within it — e.g. a sibling, a parent, or an element in another part of the DOM.","commonSituations":"Moving the alternate container outside the drop list during a refactor; passing document.body or a shared overlay container; selector resolving to an element outside the host after DOM restructuring.","solutions":["Move the alternate container element so it is a descendant of the cdkDropList element (or is the element itself).","Ensure elementContainerSelector matches only descendants of the drop list host.","If the container must live elsewhere, restructure so the drop list host wraps it.","Drop the alternate container usage entirely and keep items as direct children of cdkDropList."],"exampleFix":"// before\n<div class=\"wrapper\">\n  <div cdkDropList #list></div>\n  <div class=\"container\">items...</div>\n</div>\nlist.withElementContainer(container); // sibling -> throws\n// after\n<div cdkDropList #list>\n  <div class=\"container\">items...</div>\n</div>\nlist.withElementContainer(container); // descendant -> ok","handlingStrategy":"validation","validationCode":"const el = dropListEl.nativeElement;\nif (container !== el && !el.contains(container)) {\n  throw new Error('Alternate container must be a descendant of the drop list');\n}","typeGuard":null,"tryCatchPattern":"try {\n  ref.withElementContainer(container);\n} catch (e) {\n  if ((e as Error).message.includes('must be a descendant of the drop list')) {\n    ref.withElementContainer(dropListEl.nativeElement);\n  } else throw e;\n}","preventionTips":["Validate containment before calling withElementContainer.","Keep alternate containers inside the cdkDropList host element.","Don't pass shared/global containers like document.body."],"tags":["angular","cdk","drag-drop","drop-list-ref","dom-structure"],"backgroundTag":"invalid-drop-list-dom-structure","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}