Extras

extrasには、ポリフィルの操作が必要なDOMのランタイムを追加するオプションが含まれています。

例えば、Slotポリフィルを使用する場合、すべてのDOM APIが完全にポリフィルされるわけではありません。 全てのユーザーが追加のランタイムを必要とするわけではないため、これらのほとんどはオプトインです。

使用例:

export const config: Config = {
  extras: {
    appendChildSlotFix: true,
    cssVarsShim: false
  }
};

appendChildSlotFix

Slotポリフィルは、デフォルトではappendChild()を更新しないため、Shadow DOMのように新しい子ノードを正しい子スロットに追加します。これは、必要な人のためのオプトインポリフィルです。

cloneNodeFix

ランタイムは、デフォルトではSlotポリフィルを使用するコンポーネントを複製するときに、cloneNode()をポリフィルしません。これは、必要な人のためのオプトインポリフィルです。

cssVarsShim

レガシーブラウザでCSSカスタムプロパティを使うためのpolyfillやshimを含めます。レガシービルドのみデフォルトはtrueです。ESMビルドにはcss vars shimは含まれません。これは、レガシービルドのオプトアウトポリフィルです。

これをfalseに設定すると、レガシービルドに"フォールバック"プロパティを手動で提供する必要があります。例えば次のcssでは、IE11のcss variablesはポリフィルされないため、開発者はcss variablesの直前に手動でフォールバックを提供する必要があります。

div {
  color: blue; /* IEで使用される */
  color: var(--color); /* モダンブラウザで使用される */
}

lifecycleDOMEvents

コンポーネントのライフサイクルイベントをディスパッチします。デフォルトではこれらのイベントはディスパッチされませんが、trueに設定するとこれらのイベントをwindowでリッスンできます。 主にテストで使用されます。

イベント名 説明
stencil_appload アプリとそのすべての子コンポーネントの読み込みが完了しました。
stencil_componentWillLoad 各コンポーネントのcomponentWillLoadに対してディスパッチされます。
stencil_componentWillUpdate 各コンポーネントのcomponentWillUpdateに対してディスパッチされます。
stencil_componentWillRender 各コンポーネントのcomponentWillRenderに対してディスパッチされます。
stencil_componentDidLoad 各コンポーネントのcomponentDidLoadに対してディスパッチされます。
stencil_componentDidUpdate 各コンポーネントのcomponentDidUpdateに対してディスパッチされます。
stencil_componentDidRender 各コンポーネントのcomponentDidRenderに対してディスパッチされます。
BackNext
Contributors