Как работают методы жизненного цикла компонента эффекта Shadow DOM в stenciljs

Я пытаюсь понять, как использование Shadow DOM влияет на методы жизненного цикла компонентов в Stenciljs.

Я установил следующий пример в стартовом приложении Stencil.

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

Компоненты определяются как:

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

Каждый компонент имеет консольные операторы в каждом из методов жизненного цикла. Когда страница загружается в браузере без включения каких-либо компонентов с включенной теневой DOM.

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

Включение Shadow DOM в компоненте a изменяет рендеринг.

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

Вывод консоли изменится на:

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

Компонент b теперь визуализируется до того, как будут отрисованы как компонент a, так и компонент c. Я не уверен, как рендеринг страницы с помощью Shadow DOM влияет на это изменение.


stenciljs shadow-dom
person r2207    schedule 18.09.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

В моих тестах порядок рендеринга может быть одним из трех для каждого запроса. Я не вижу никаких изменений при включении Shadow DOM на каком-либо из компонентов.

Я использовал те же 3 компонента и обновлял страницу несколько раз. Это три разных выхода:

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

На практике, вероятно, не имеет значения, в каком порядке они отображаются, если они следуют Иерархия жизненного цикла, что они и делают (по крайней мере, для метода componentDidLoad).

person Thomas    schedule 19.09.2018