refactor(engine): optimize computation of transitive shadow mode (#2803)

salesforce · May 2, 2022 · 95ce4c3 · 95ce4c3
1 parent 150b49d
commit 95ce4c3
Showing 1 changed file with 12 additions and 27 deletions.
diff --git a/packages/@lwc/engine-core/src/framework/vm.ts b/packages/@lwc/engine-core/src/framework/vm.ts
@@ -112,8 +112,11 @@ export interface VM<N = HostNode, E = HostElement> {
     /** The owner VM or null for root elements. */
     readonly owner: VM<N, E> | null;
     /** Rendering operations associated with the VM */
-    renderMode: RenderMode;
+    readonly renderMode: RenderMode;
     shadowMode: ShadowMode;
+    /** Transitive support for native Shadow DOM. A component in native mode
+     * transitively opts all of its descendants into native. */
+    readonly nearestShadowMode: ShadowMode | null;
     /** The component creation index. */
     idx: number;
     /** Component state, analogous to Element.isConnected */
@@ -253,14 +256,6 @@ export function removeVM(vm: VM) {
     resetComponentStateWhenRemoved(vm);
 }
 
-function getNearestShadowAncestor(vm: VM): VM | null {
-    let ancestor = vm.owner;
-    while (!isNull(ancestor) && ancestor.renderMode === RenderMode.Light) {
-        ancestor = ancestor.owner;
-    }
-    return ancestor;
-}
-
 export function createVM<HostNode, HostElement>(
     elm: HostElement,
     ctor: LightningElementConstructor,
@@ -293,6 +288,8 @@ export function createVM<HostNode, HostElement>(
         cmpTemplate: null,
 
         renderMode: def.renderMode,
+        shadowMode: computeShadowMode(def, owner),
+        nearestShadowMode: owner?.shadowRoot ? owner.shadowMode : owner?.nearestShadowMode ?? null,
 
         context: {
             stylesheetToken: undefined,
@@ -307,7 +304,6 @@ export function createVM<HostNode, HostElement>(
 
         // Properties set right after VM creation.
         tro: null!,
-        shadowMode: null!,
 
         // Properties set by the LightningElement constructor.
         component: null!,
@@ -319,7 +315,6 @@ export function createVM<HostNode, HostElement>(
         getHook,
     };
 
-    vm.shadowMode = computeShadowMode(vm);
     vm.tro = getTemplateReactiveObserver(vm);
 
     if (process.env.NODE_ENV !== 'production') {
@@ -342,9 +337,7 @@ export function createVM<HostNode, HostElement>(
     return vm;
 }
 
-function computeShadowMode(vm: VM) {
-    const { def } = vm;
-
+function computeShadowMode(def: ComponentDef, owner: VM | null) {
     let shadowMode;
     if (isSyntheticShadowDefined) {
         if (def.renderMode === RenderMode.Light) {
@@ -358,19 +351,11 @@ function computeShadowMode(vm: VM) {
                 if (def.shadowSupportMode === ShadowSupportMode.Any) {
                     shadowMode = ShadowMode.Native;
                 } else {
-                    const shadowAncestor = getNearestShadowAncestor(vm);
-                    if (
-                        !isNull(shadowAncestor) &&
-                        shadowAncestor.shadowMode === ShadowMode.Native
-                    ) {
-                        // Transitive support for native Shadow DOM. A component in native mode
-                        // transitively opts all of its descendants into native.
-                        shadowMode = ShadowMode.Native;
-                    } else {
-                        // Synthetic if neither this component nor any of its ancestors are configured
-                        // to be native.
-                        shadowMode = ShadowMode.Synthetic;
-                    }
+                    // Transitive support for native Shadow DOM. A component in native mode
+                    // transitively opts all of its descendants into native.
+                    // Synthetic if neither this component nor any of its ancestors are configured
+                    // to be native.
+                    shadowMode = owner?.nearestShadowMode ?? ShadowMode.Synthetic;
                 }
             } else {
                 shadowMode = ShadowMode.Synthetic;