4

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'
})

各コンポーネントには、ライフサイクル メソッドごとにコンソール ステートメントがあります。Shadow 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

component-a で Shadow DOM をオンにすると、レンダリングが変更されます。

@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-a と component-c の両方がレンダリングされる前に、component-b がレンダリングされるようになりました。Shadow DOM を使用したページのレンダリングがこの変更にどのように影響するかはわかりません。

4

1 に答える 1

1

私のテストでは、レンダリング順序は、リクエストごとに 3 つの異なる順序のいずれかになります。いずれかのコンポーネントで Shadow DOM を有効にしても、何の変化も見られません。

同じ 3 つのコンポーネントを使用し、ページを数回更新しました。これらは、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

実際には、それらがLifecycle Hierarchyに従っている限り、レンダリングされる順序はおそらく問題ではありません (少なくともcomponentDidLoadメソッドについては)。

于 2018-09-19T13:13:50.987 に答える