fix: prepare for querying child items while disconnected

packages/menu/src/MenuItem.ts

@@ -180,7 +180,7 @@ export class MenuItem extends LikeAnchor(Focusable) {
             return this._itemChildren;
         }
 
-        const iconSlot = this.shadowRoot.querySelector(
+        const iconSlot = this.shadowRoot?.querySelector(
             'slot[name="icon"]'
         ) as HTMLSlotElement;
         const icon = !iconSlot
@@ -191,7 +191,7 @@ export class MenuItem extends LikeAnchor(Focusable) {
                   newElement.classList.toggle('icon');
                   return newElement;
               });
-        const contentSlot = this.shadowRoot.querySelector(
+        const contentSlot = this.shadowRoot?.querySelector(
             'slot:not([name])'
         ) as HTMLSlotElement;
         const content = !contentSlot

packages/menu/stories/menu-item.disconnected.stories.ts

@@ -0,0 +1,189 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { html, LitElement, TemplateResult } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { when } from 'lit/directives/when.js';
+
+import '@spectrum-web-components/picker/sp-picker.js';
+import '@spectrum-web-components/button/sp-button.js';
+import { SpectrumMixin } from '@spectrum-web-components/base';
+
+enum BlendModeValue {
+    normal = 2,
+    multiply = 3,
+    screen = 7,
+}
+
+interface BlendModeOption {
+    value: BlendModeValue;
+    title: string;
+    subtitle: string;
+    thumbnail: string;
+}
+
+const XElement = SpectrumMixin(LitElement);
+
+class MyContainer extends XElement {
+    @state()
+    private _counter = 0;
+
+    private _handleClick(): void {
+        this._counter += 1;
+    }
+
+    protected override render(): TemplateResult {
+        return html`
+            <div>
+                ${when(
+                    this._counter % 2 === 0,
+                    () => html`
+                        <my-view1></my-view1>
+                    `,
+                    () => html`
+                        <my-view2></my-view2>
+                    `
+                )}
+                <sp-button
+                    variant="primary"
+                    size="m"
+                    @click=${this._handleClick}
+                >
+                    Switch views
+                </sp-button>
+            </div>
+        `;
+    }
+}
+
+customElements.define('my-container', MyContainer);
+
+class MyView1 extends XElement {
+    protected override render(): TemplateResult {
+        const blendModeOptions = [
+            {
+                value: BlendModeValue.normal,
+                title: 'Normal 1',
+                subtitle: 'No effect applied',
+            },
+            {
+                value: BlendModeValue.multiply,
+                title: 'Multiply',
+                subtitle: 'Darken shadows with contrast and details',
+            },
+            {
+                value: BlendModeValue.screen,
+                title: 'Screen',
+                subtitle: 'Brighten highlights with contrast and details',
+            },
+        ];
+        return html`
+            View 1
+            <my-picker
+                .blendMode=${BlendModeValue.normal}
+                .blendModeOptions=${blendModeOptions}
+                dir="ltr"
+            ></my-picker>
+        `;
+    }
+}
+
+customElements.define('my-view1', MyView1);
+
+class MyView2 extends XElement {
+    protected override render(): TemplateResult {
+        const blendModeOptions = [
+            {
+                value: BlendModeValue.normal,
+                title: 'Normal 2',
+                subtitle: 'No effect applied',
+            },
+            {
+                value: BlendModeValue.multiply,
+                title: 'Multiply',
+                subtitle: 'Darken shadows with contrast and details',
+            },
+            {
+                value: BlendModeValue.screen,
+                title: 'Screen',
+                subtitle: 'Brighten highlights with contrast and details',
+            },
+        ];
+        return html`
+            View 2
+            <my-picker
+                .blendMode=${BlendModeValue.normal}
+                .blendModeOptions=${blendModeOptions}
+            ></my-picker>
+        `;
+    }
+}
+
+customElements.define('my-view2', MyView2);
+
+class MyPicker extends XElement {
+    @property({ type: Array })
+    public blendModeOptions: BlendModeOption[] = [];
+
+    @property()
+    public blendMode: number = BlendModeValue.normal;
+
+    private _renderBlendOptions(): TemplateResult {
+        return html`
+            ${repeat(
+                this.blendModeOptions,
+                // This is intentional so that repeat directive will add instead of
+                // update existing DOM which will then trigger error in
+                // MenuItem.childrenItem
+                // Using .value for the key will workaround the issue
+                (blendModeOption) => blendModeOption,
+                (blendModeOption: BlendModeOption) =>
+                    html`
+                        <sp-menu-item value=${blendModeOption.value}>
+                            ${blendModeOption.title}
+                            <span slot="value">
+                                ${blendModeOption.subtitle}
+                            </span>
+                        </sp-menu-item>
+                    `
+            )}
+        `;
+    }
+    protected override render(): TemplateResult {
+        return html`
+            <sp-picker
+                id="blendMode"
+                size="l"
+                label="Blend"
+                value=${this.blendMode}
+            >
+                ${this._renderBlendOptions()}
+            </sp-picker>
+        `;
+    }
+}
+
+customElements.define('my-picker', MyPicker);
+
+export default {
+    component: 'sp-menu-item',
+    title: 'Menu Item/Disconnected',
+};
+
+export const disconnectedChildItems = (): TemplateResult => html`
+    <my-container></my-container>
+`;
+
+disconnectedChildItems.swc_vrt = {
+    skip: true,
+};