Extras

extras には、Stencilの新しい/実験的な機能を有効にするオプションが含まれています。 機能のランタイムを追加したり削除したりするオプションが含まれており、ポリフィルへの操作を必要とします。例えば、Slotポリフィルを使った場合、すべてのDOM APIが完全にポリフィルされるわけではありません。 例えば、Slotポリフィルを使用した場合、全てのDOM APIが完全にポリフィルされるわけではありません。すべてのユーザーが追加のランタイムを必要としているわけではないので、これらのほとんどはオプトインです。

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

デフォルトでは、StencilはIE11、Edge 18以下（Chromiumに移行する前のEdge）およびSafari 10では機能しません。レガシーブラウザをサポートするには、ブラウザでポリフィルをダウンロードして実行する必要があります。extras設定を使用することで、アプリはこれらの追加のランタイム設定をオプトインできます。

例は supporting レガシーブラウザをサポートするextras設定例です:

export const config: Config = {
  buildEs5: 'prod',
  extras: {
    cssVarsShim: true,
    dynamicImportShim: true,
    shadowDomShim: true,
    safari10: true,
    scriptDataOpts: true,
    appendChildSlotFix: false,
    cloneNodeFix: false,
    slotChildNodesFix: true,
  }
};

注：この例ではレガシーブラウザをサポートする必要があるため、buildEs5：'prod'も設定で設定されています。詳細については、buildEs5 configを参照してください。

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); /* モダンブラウザで使用される */
}

dynamicImportShim

動的なimport() shimです。これは、Edge18以下およびFirefox67以下でのみ必要です。Edge 18以下（Chromiumに移行する前のEdge）をサポートする必要がない場合は、dynamicImportShimをfalseに設定することをお勧めします。デフォルトは falseです。

lifecycleDOMEvents

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

safari10

safari 10は<script type="module">でESモジュールをサポートしていますが、<script nomodule>は実装されていませんでした。safari10がfalseに設定されている場合、ランタイムはsafari 10のサポートを適用しません。もしアプリケーションがsafari 10をサポートする必要がない場合は、この値をfalseに設定することをお勧めします。デフォルトは falseです。

scopedSlotTextContentFix

An experimental flag that when set to true, aligns the behavior of invoking the textContent getter/setter on a scoped component to act more like a component that uses the shadow DOM. Specifically, invoking textContent on a component will adhere to the return values described in MDN's article on textContent. Defaults to false.

scriptDataOpts

実際の<script>要素のdata-optsプロパティにデータを割り当てることが可能であり、そのデータはStencilの最初の自動実行に渡されます。この機能は非常に特殊なケースでのみ必要とされ、ほとんどの場合必要とされません。falseに設定すると、このデータは読み込まれません。デフォルトは falseです。

shadowDomShim

もしtrueで有効にすると、shadow dom shimが必要かどうかをチェックします。しかし、shadow dom がすでにブラウザでネイティブにサポートされていると判断された場合はshimを要求しません。もしfalseに設定すると、すべての shadow domテストを回避します。アプリが IE11 や Edge 18 以下をサポートする必要がない場合は、shadowDomShimをfalseに設定することを推奨します。デフォルトは falseです。

slotChildNodesFix

shadow domをサポートしていないブラウザ（IE11とEdge 18以下）では、slotがポリフィルされて同じ動作をシミュレートします。ただし、ホスト要素のchildNodesとchildrenゲッターは、デフォルトのスロットの子ノードと要素のみを表すようには修正されません。デフォルトは falseです。