How does the Shadow DOM effect component lifecycle methods in stenciljs

Question

I am trying to understand how using the Shadow DOM effects a components lifecycle methods in Stenciljs.

I have set up the following example in a Stencil starter app.

<body>
  <my-app>
    <component-a>
      <component-c />
    </component-a>
    <component-b />
    </my-app> 
    ...
</body>

Components are defined as:

@Component({
  tag: 'my-app',
  styleUrl: 'my-app.css'
})
@Component({
  tag: 'component-a'
})
@Component({
  tag: 'component-b'
})
@Component({
  tag: 'component-c'
})

Each component has console statements in each of its lifecycle methods. When the page loads in the browser without any of the components having the shadow DOM turned on.

09:30:00.603 my-app.js:19 my-app  is about to be rendered
09:30:00.605 component-a.js:19 component-a  is about to be rendered
09:30:00.606 component-c.js:19 component-c  is about to be rendered
09:30:00.606 component-c.js:30 component-c  has been rendered
09:30:00.607 component-a.js:30 component-a  has been rendered
09:30:00.607 component-b.js:19 component-b  is about to be rendered
09:30:00.608 component-b.js:30 component-b  has been rendered
09:30:00.608 my-app.js:30 my-app  has been rendered

Turning the Shadow DOM on in component-a alters the rendering.

@Component({
  tag: 'component-a',
  shadow: true
})

The Console output changes to :

09:33:22.840 my-app.js:19 my-app  is about to be rendered
09:33:22.842 component-a.js:19 component-a  is about to be rendered
09:33:22.843 component-b.js:19 component-b  is about to be rendered
09:33:22.843 component-b.js:30 component-b  has been rendered
09:33:22.844 component-c.js:19 component-c  is about to be rendered
09:33:22.845 component-c.js:30 component-c  has been rendered
09:33:22.845 component-a.js:30 component-a  has been rendered
09:33:22.845 my-app.js:30 my-app  has been rendered

component-b is now being rendered before both component-a and component-c are rendered. I am not sure how rendering the page with the Shadow DOM effects this change.

score 1 · Answer 1 · answered Sep 19 '18 at 13:13

In my tests the render order can be one of three different ones on every request. I don't see any change when enabling Shadow DOM on any of the components.

I used the same 3 components and refreshed the page several times. These are the three different outputs:

Component A is about to be rendered
Component B is about to be rendered
Component B has been rendered
Component C is about to be rendered
Component C has been rendered
Component A has been rendered

-- Hard Refresh --

Component A is about to be rendered
Component C is about to be rendered
Component C has been rendered
Component A has been rendered
Component B is about to be rendered
Component B has been rendered

-- Hard Refresh --

Component B is about to be rendered
Component B has been rendered
Component A is about to be rendered
Component C is about to be rendered
Component C has been rendered
Component A has been rendered

In practice it probably won't matter which in order they're rendered as long as they follow the Lifecycle Hierarchy, which they do (at least for the componentDidLoad method).

How does the Shadow DOM effect component lifecycle methods in stenciljs

1 Answers1