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

[driskull]

monday.com sync: #12594198002

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

• Tab Nav

Actual Behavior

calcite-tab-nav has a querySelectorAll path for tab-title scroll targeting. With projected tab titles through parent Shadow DOM, overflow scroll targeting can miss titles.

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 shrink container width to force overflow.
2. Use tab-nav scroll controls.
3. Open console and compare projected title count with scroll behavior.
4. Observe scroll targeting can skip projected titles.

CodePen Failure Example

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

<wrapper-host id="host">
  <calcite-tab-title>One</calcite-tab-title>
  <calcite-tab-title>Two</calcite-tab-title>
  <calcite-tab-title>Three</calcite-tab-title>
  <calcite-tab-title>Four</calcite-tab-title>
</wrapper-host>

<script type="module">
  customElements.define("wrapper-host", class extends HTMLElement {
    constructor() {
      super();
      const root = this.attachShadow({ mode: "open" });
      root.innerHTML = `
        <div style="max-width:150px;border:1px solid #ccc">
          <calcite-tab-nav id="tn">
            <slot></slot>
          </calcite-tab-nav>
        </div>
      `;
    }
  });

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