Как Shadow DOM влияет на методы жизненного цикла компонентов в stenciljs - PullRequest
Новая
       29

Как Shadow DOM влияет на методы жизненного цикла компонентов в stenciljs

0 голосов
/ 18 сентября 2018

Я пытаюсь понять, как использование 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

Включение теневого 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

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

1 Ответ

0 голосов
/ 19 сентября 2018

В моих тестах порядок визуализации может быть одним из трех разных при каждом запросе.Я не вижу никаких изменений при включении 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).

...