@@ -114,11 +114,8 @@ export interface VM<N = HostNode, E = HostElement> {
114114 /** Whether or not the VM was hydrated */
115115 readonly hydrated : boolean ;
116116 /** Rendering operations associated with the VM */
117- readonly renderMode : RenderMode ;
117+ renderMode : RenderMode ;
118118 shadowMode : ShadowMode ;
119- /** Transitive support for native Shadow DOM. A component in native mode
120- * transitively opts all of its descendants into native. */
121- readonly nearestShadowMode : ShadowMode | null ;
122119 /** The component creation index. */
123120 idx : number ;
124121 /** Component state, analogous to Element.isConnected */
@@ -258,6 +255,14 @@ export function removeVM(vm: VM) {
258255 resetComponentStateWhenRemoved ( vm ) ;
259256}
260257
258+ function getNearestShadowAncestor ( vm : VM ) : VM | null {
259+ let ancestor = vm . owner ;
260+ while ( ! isNull ( ancestor ) && ancestor . renderMode === RenderMode . Light ) {
261+ ancestor = ancestor . owner ;
262+ }
263+ return ancestor ;
264+ }
265+
261266export function createVM < HostNode , HostElement > (
262267 elm : HostElement ,
263268 ctor : LightningElementConstructor ,
@@ -292,8 +297,6 @@ export function createVM<HostNode, HostElement>(
292297 hydrated : Boolean ( hydrated ) ,
293298
294299 renderMode : def . renderMode ,
295- shadowMode : computeShadowMode ( def , owner ) ,
296- nearestShadowMode : owner ?. shadowRoot ? owner . shadowMode : owner ?. nearestShadowMode ?? null ,
297300
298301 context : {
299302 stylesheetToken : undefined ,
@@ -308,6 +311,7 @@ export function createVM<HostNode, HostElement>(
308311
309312 // Properties set right after VM creation.
310313 tro : null ! ,
314+ shadowMode : null ! ,
311315
312316 // Properties set by the LightningElement constructor.
313317 component : null ! ,
@@ -319,6 +323,7 @@ export function createVM<HostNode, HostElement>(
319323 getHook,
320324 } ;
321325
326+ vm . shadowMode = computeShadowMode ( vm ) ;
322327 vm . tro = getTemplateReactiveObserver ( vm ) ;
323328
324329 if ( process . env . NODE_ENV !== 'production' ) {
@@ -341,7 +346,9 @@ export function createVM<HostNode, HostElement>(
341346 return vm ;
342347}
343348
344- function computeShadowMode ( def : ComponentDef , owner : VM | null ) {
349+ function computeShadowMode ( vm : VM ) {
350+ const { def } = vm ;
351+
345352 let shadowMode ;
346353 if ( isSyntheticShadowDefined ) {
347354 if ( def . renderMode === RenderMode . Light ) {
@@ -355,11 +362,19 @@ function computeShadowMode(def: ComponentDef, owner: VM | null) {
355362 if ( def . shadowSupportMode === ShadowSupportMode . Any ) {
356363 shadowMode = ShadowMode . Native ;
357364 } else {
358- // Transitive support for native Shadow DOM. A component in native mode
359- // transitively opts all of its descendants into native.
360- // Synthetic if neither this component nor any of its ancestors are configured
361- // to be native.
362- shadowMode = owner ?. nearestShadowMode ?? ShadowMode . Synthetic ;
365+ const shadowAncestor = getNearestShadowAncestor ( vm ) ;
366+ if (
367+ ! isNull ( shadowAncestor ) &&
368+ shadowAncestor . shadowMode === ShadowMode . Native
369+ ) {
370+ // Transitive support for native Shadow DOM. A component in native mode
371+ // transitively opts all of its descendants into native.
372+ shadowMode = ShadowMode . Native ;
373+ } else {
374+ // Synthetic if neither this component nor any of its ancestors are configured
375+ // to be native.
376+ shadowMode = ShadowMode . Synthetic ;
377+ }
363378 }
364379 } else {
365380 shadowMode = ShadowMode . Synthetic ;
0 commit comments