Bug: Dropdown shadow DOM slot projection breaks query-based child discovery

[driskull]

monday.com sync: #12594190032

Bug Report Draft: Shadow DOM slot projection breaks query-based child discovery

Check existing issues

• I have checked for existing issues to avoid duplicates

Which Component

• Dropdown

Actual Behavior

calcite-dropdown flattens items from groups using querySelectorAll over groups. In projected-slot usage, item collection can desync and keyboard traversal may skip projected entries.

Expected Behavior

The component should track slotted child items via slot-based APIs (for example, slotchange + assignedElements with flatten as needed), so behavior remains correct when children are projected through parent Shadow DOM.

Reproduction Sample

https://codepen.io/pen?template=emzLWmy

Reproduction Version

5.2.0-next.29

Relevant Info

• OS: macOS
• Browsers: Latest Chrome and Safari
• Root cause pattern: querySelector/querySelectorAll-based child discovery misses projected children when crossing slot boundaries.

Regression?

No. Not a regression.

Priority impact

impact - p2 - want for an upcoming milestone

Impact

Breaks reliability for wrapper-component architectures that compose Calcite components through Shadow DOM projection.

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/calcite-ui-icons
• @esri/eslint-plugin-calcite-components

Esri team

N/A

Reproduction Steps

1. Paste sample and open dropdown.
2. Navigate with ArrowDown/ArrowUp and select items.
3. Check console for projected dropdown-item count.
4. Observe mismatches in navigation/active item behavior.

CodePen Failure Example

Paste the following into the CodePen template to reproduce the issue pattern:

<wrapper-host id="host">
  <calcite-dropdown-group>
    <calcite-dropdown-item>First</calcite-dropdown-item>
    <calcite-dropdown-item>Second</calcite-dropdown-item>
    <calcite-dropdown-item>Third</calcite-dropdown-item>
  </calcite-dropdown-group>
</wrapper-host>

<script type="module">
  customElements.define("wrapper-host", class extends HTMLElement {
    constructor() {
      super();
      const root = this.attachShadow({ mode: "open" });
      root.innerHTML = `
        <calcite-dropdown id="dd" open>
          <calcite-action slot="trigger" text="Open" icon="chevron-down"></calcite-action>
          <slot></slot>
        </calcite-dropdown>
      `;
    }
  });

  const host = document.querySelector("#host");
  console.log("Projected dropdown items:", host.querySelectorAll("calcite-dropdown-item").length);
</script>