diff --git a/packages/lwc-engine/src/framework/dom/__tests__/shadow-root.spec.ts b/packages/lwc-engine/src/framework/dom/__tests__/shadow-root.spec.ts index 7475253b74..621329ee57 100644 --- a/packages/lwc-engine/src/framework/dom/__tests__/shadow-root.spec.ts +++ b/packages/lwc-engine/src/framework/dom/__tests__/shadow-root.spec.ts @@ -85,6 +85,13 @@ describe('root', () => { }); }); + it('should expose the shadow root via $$ShadowRoot$$ when in test mode', () => { + class MyComponent extends Element {} + const elm = createElement('x-foo', { is: MyComponent }); + document.body.appendChild(elm); + expect(elm.$$ShadowRoot$$).toBeDefined(); + }); + }); describe('childNodes', () => { diff --git a/packages/lwc-engine/src/framework/dom/shadow-root.ts b/packages/lwc-engine/src/framework/dom/shadow-root.ts index f0ff420bfb..8aee7c5b4b 100644 --- a/packages/lwc-engine/src/framework/dom/shadow-root.ts +++ b/packages/lwc-engine/src/framework/dom/shadow-root.ts @@ -10,9 +10,11 @@ import { setAttribute, removeAttribute, } from './element'; -import { ViewModelReflection, getAttrNameFromPropName } from "../utils"; +import { ViewModelReflection, getAttrNameFromPropName, usesNativeSymbols } from "../utils"; import { childNodesGetter } from "./node"; +export const ShadowRootKey = usesNativeSymbols && process.env.NODE_ENV !== 'test' ? Symbol('ShadowRoot') : '$$ShadowRoot$$'; + export const usesNativeShadowRoot = typeof (window as any).ShadowRoot !== "undefined"; const ShadowRootPrototype = usesNativeShadowRoot ? (window as any).ShadowRoot.prototype : undefined; const attachShadowOriginal = usesNativeShadowRoot ? Element.prototype.attachShadow : undefined; @@ -35,6 +37,7 @@ export function attachShadow(elm, options, fallback): ShadowRoot { // the component will not work when running in fallback mode. defineProperties(sr, DevModeBlackListDescriptorMap); } + elm[ShadowRootKey] = sr; return sr as ShadowRoot; }