カスタム要素のポリフィルとトランスパイル

投稿日: 2022-04-20 2022-04-20

Webコンポーネント仕様を使用したカスタム要素の作成の基本について説明しましたが、最後に、新しいJavaScript機能の使用との事実により、単純なカスタム要素はまだ本番環境に対応していないことを示唆しました。 ] CustomElementsおよびShadowDOM は、まだすべての一般的なブラウザーでサポートされているわけではありません。

この投稿では、カスタム要素コードをトランスパイルしてES5と互換性を持たせ、必要なWebコンポーネントのポリフィルを含める手順を簡単に説明します。

トランスパイル

カスタム要素コードにはES6クラスが含まれ、おそらく文字列リテラルおよび矢印関数も含まれます。これらの機能は作成者時に使用するのに最適ですが、ES5コードのみを理解するブラウザーで実行できるように、Babelなどのツールを使用してコードをトランスパイルする必要があります。先に進み、babel-cliとbabel-preset-es2015プリセットを使用します。

プロジェクトにまだpackage.jsonファイルがない場合は、npmまたはYarnを使用してファイルを作成してください。これにより、必要なパッケージをインストールできるようになります。

$ npm init

# or, using Yarn
$ yarn init

これが完了したら、先に進んで必要なパッケージをインストールできます。

$ npm install babel-cli babel-preset-es2015 --save-dev

# or, using Yarn
$ yarn add babel-cli babel-preset-es2015 --dev

トランスパイルされたコードをdistフォルダーに出力するので、プロジェクトのルートにそのフォルダーを作成できます。これで、buildスクリプトをpackage.jsonファイルに追加できます。このファイルはes2015プリセットでBabelを実行し、結果をdistフォルダーに出力します。

package.json

{
  "name": "my-title",
  "version": "0.0.1",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "babel --presets es2015 my-title.js --out-file dist/my-title.js"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }
}

これで、先に進んでトランスパイルを実行できます。

$ npm run build

# or, using Yarn
$ yarn build

ポリフィル

ポリフィルは、まだサポートされていないブラウザの欠落しているネイティブ実装を置き換える機能を実装する小さなプラグインです。 Webコンポーネントの場合、カスタム要素、Shadow DOM、およびtemplate要素のポリフィルが必要になります。幸いなことに、 WebComponents.org は、プロジェクトに必要なポリフィルを簡単に含めることができるポリフィルのスイートを維持しています。

スイートには、選択可能な既製のバンドルのセットが用意されています。たとえば、 webcomponents-lite.js バンドルは、HTMLインポート、カスタム要素、Shadow DOM（ ShadowDOMおよびShadyCSS と呼ばれるポリフィルを含む）およびテンプレート要素。このバンドルにより、カスタム要素がInternetExplorer11までさかのぼって機能することが保証されます。

webcomponents-loader.js

利用可能なローダーwebcomponents-loader.jsもあります。これは、機能の検出を実行し、必要なポリフィルをその場で含みます。ローダーを使用するのがおそらくすべてを機能させる最も簡単な方法であり、これがこの例で使用するものです。

カスタム要素は、 HTMLElement を拡張するES6クラスを使用して定義する必要がありますが、現在は、クラス構文が削除されたトランスパイルコードを使用しています。これを修正するには、custom-elements-es5-adapter.jsというファイルを使用する必要があります。

この記事の執筆時点では、 webcomponents-loader.js はBower経由でインストールする必要があるため、npm install -g bowerを実行してBowerを使用できるようにする必要があります。

Bowerを使用して、webcomponentsjsパッケージをプロジェクトにインストールするだけです。これにより、必要なファイルがbower_componentsフォルダーにインストールされます。

$ bower install --save webcomponents/webcomponentsjs

ここで、ページの先頭にcustom-elements-es5-adapter.jsとwebcomponents-loader.jsを含めます。

index.html（部分的）

<script src="bower_components/webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>

最後のステップは、WebComponentsReadyイベントが発生したときにトランスパイルされたカスタム要素のスクリプトのみを含めることです。これは、必要なポリフィルがロードされたときにローダーによって発生するカスタムイベントです。 script 要素を作成し、その src プロパティをトランスパイルされたカスタム要素コードのパスに設定して、ドキュメントのヘッドに追加します。

window.addEventListener('WebComponentsReady', function () {
  var myTitleScript = document.createElement('script');
  myTitleScript.src = 'dist/my-title.js';
  document.head.appendChild(myTitleScript);
});

最終的なindex.htmlファイルは次のようになります。

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Custom Element!</title>

  <script src="bower_components/webcomponentsjs/custom-elements-es5-adapter.js"></script>
  <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
</head>

<body>
  <my-title></my-title>

  <script>
    window.addEventListener('WebComponentsReady', function () {
      var myTitleScript = document.createElement('script');
      myTitleScript.src = 'dist/my-title.js';
      document.head.appendChild(myTitleScript);
    });
  </script>
</body>

</html>

🔧そして完了です！これで、カスタム要素を本番プロジェクトに含める準備が整いました。

getdocs

13036