fix: use correct shadow root @W-17441501

packages/@lwc/engine-dom/src/language.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2024, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+
+// Like @lwc/shared, but for DOM APIs
+
+export const ElementDescriptors = Object.getOwnPropertyDescriptors(Element.prototype);
+
+export const ElementAttachShadow = ElementDescriptors.attachShadow.value!;
+export const ElementShadowRootGetter = ElementDescriptors.shadowRoot.get!;

packages/@lwc/engine-dom/src/renderer/index.ts

@@ -6,6 +6,7 @@
  */
 
 import { assert, isNull, isUndefined } from '@lwc/shared';
+import { ElementAttachShadow, ElementShadowRootGetter } from '../language';
 
 function cloneNode(node: Node, deep: boolean): Node {
     return node.cloneNode(deep);
@@ -57,10 +58,12 @@ function attachShadow(element: Element, options: ShadowRootInit): ShadowRoot {
     //   1. upon initial load with an SSR-generated DOM, while in Shadow render mode
     //   2. when a webapp author places <c-app> in their static HTML and mounts their
     //      root component with customElement.define('c-app', Ctor)
-    if (!isNull(element.shadowRoot)) {
-        return element.shadowRoot;
+    // see W-17441501
+    const shadowRoot = ElementShadowRootGetter.call(element);
+    if (!isNull(shadowRoot)) {
+        return shadowRoot;
     }
-    return element.attachShadow(options);
+    return ElementAttachShadow.call(element, options);
 }
 
 function setText(node: Node, content: string): void {

packages/@lwc/integration-karma/test/component/LightningElement.shadowRoot/index.spec.js

@@ -1,17 +1,25 @@
 import { createElement } from 'lwc';
-import XTest from 'x/test';
+import Basic from 'x/basic';
+import Correct from 'x/correct';
 
 it('should always return null when accessing shadowRoot property from within the component', () => {
-    const el = createElement('x-test', { is: XTest });
+    const el = createElement('x-basic', { is: Basic });
     document.body.appendChild(el);
 
     expect(el.getShadowRoot()).toBe(null);
 });
 
 it('should be able to access the shadowRoot property from outside the component', () => {
-    const el = createElement('x-test', { is: XTest });
+    const el = createElement('x-basic', { is: Basic });
     document.body.appendChild(el);
 
     expect(el.shadowRoot).not.toBe(null);
     expect(el.shadowRoot).toBeInstanceOf(ShadowRoot);
 });
+
+it('uses the correct shadow root - W-17441501', () => {
+    const el = createElement('x-correct', { is: Correct });
+    document.body.appendChild(el);
+
+    expect(el.shadowRoot.textContent).toBe('');
+});

packages/@lwc/integration-karma/test/component/LightningElement.shadowRoot/x/correct/correct.html

@@ -0,0 +1,3 @@
+<template>
+    Hello, world!
+</template>

packages/@lwc/integration-karma/test/component/LightningElement.shadowRoot/x/correct/correct.js

@@ -0,0 +1,9 @@
+import { LightningElement, api } from 'lwc';
+
+export default class extends LightningElement {
+    @api
+    get shadowRoot() {
+        return (this._shadowRoot =
+            this._shadowRoot || document.body.appendChild(document.createElement('p')));
+    }
+}