☣️ 🐷 ⌚️ HTMLインポートの概要 🦕 😞 💊

テンプレート、シャドウDOM、およびカスタム要素を使用すると、UIコンポーネントをより簡単かつ迅速に構築できます。ただし、これはHTML、CSS、およびJavaScriptリソースを個別にロードする最も効率的な方法ではありません。

jQuery UIやBootstrapなどのライブラリには、JavaScript、CSS、およびWebフォント用に個別のタグが必要です。いくつかの依存関係を持つWebコンポーネントを使用すると、すべてが簡単になります。

HTMLインポートを使用すると、このタイプの複数のファイルのコレクションとしてリソースをロードできます。

このトピックに関するビデオをよく理解することをお勧めします。

HTMLインポートの使用

HTMLファイルをロードするには、 rel importしてlinkタグを追加し、目的のファイルへのパスを含むhrefパラメーターを追加します。たとえば、 component.htmlというファイルをindex.htmlにロードする場合、すべてが次のようになります。
index.html

 <link rel="import" href="component.html" >

スクリプト、スタイルシート、フォントなどのリソースをダウンロードできます。
component.html

 <link rel="stylesheet" href="css/style.css"> <script src="js/script.js"></script>

doctype 、 html 、 head 、 bodyオプションです。 HTMLインポートにより、指定されたすべての要素が自動的にダウンロードされ、ページに追加され、JavaScriptがあれば起動されます。

実行順序

ブラウザはコンテンツを順番に処理します。これは、HTMLの最初のscriptが同じよりも早く、しかし最後にロードされることを意味します。一部のブラウザは、スクリプトが完了するのを待ってから次のアイテムをロードすることに注意してください。

scriptタグで残りのHTMLがブロックされないようにするには、 async / defer使用できdefer （すべてのスクリプトをページの最後に移動することもできます）。 deferは、HTMLのロード後にのみコードを実行できるdefer示します。 asyncにより、ブラウザはこれら2つのアクションを並行して実行できます。

では、インポートはどのように機能しますか？

HTMLインポート内のscriptは、 defer属性を持つ通常のscriptタグのように機能します。以下の例では、 index.htmlはscript2.jsを実行する前にscript2.js内でscript1.jsおよびscript2.jsを実行しscript3.js 。
index.html

 <link rel="import" href="component.html"> // 1. <title> </title> <script src="script3.js"></script> // 4.

component.html

 <script src="js/script1.js"></script> // 2. <script src="js/script2.js"></script> // 3.

Component.htmlはindex.htmlからロードされ、実行をindex.htmlしています。
script1.js component.html script1.jsれcomponent.html 。
script2.js 、 script1.js後にcomponent.htmlにscript2.jsれcomponent.html 。
script3.js 、 script2.js後にindex.htmlにscript3.jsれます。

link[rel="import"] async属性を追加すると、 scriptタグのasync属性と見なされることに注意してください。 HTMLはブロックされません。これにより、プロジェクトのパフォーマンスが向上する可能性があります。

を超えて

実際、HTMLインポートでは、別のソースからファイルを完全に転送することはできません。たとえば、 http：//example.com/ページhttp://webcomponents.org/にインポートすることはできません。

この制限を回避するには、CORS（Cross Origin Resource Sharing）を使用します。この技術の詳細については、この記事をご覧ください。

インポートされたファイルのウィンドウおよび`document`オブジェクト

前に、インポートされたJavaScriptがページで実行されることを説明しました。残念ながら、これはインポートされたHTMLファイルについては言えません。これを実現するには、少しスクリプトを追加する必要があります。

インポートしたファイルのdocumentオブジェクトが元のページにリンクすることに注意してください。

前に記述したコードを例として使用して、 index.html documentとcomponent.htmlをindex.html documentにリンクしdocument 。

ファイルに小さな変更を加えます。
index.html

 var link = document.querySelector('link[rel="import"]'); link.addEventListener('load', function(e) { var importedDoc = link.import; // importedDoc points to the document under component.html });

component.htmlからdocumentを取得するには、コードをdocument.currentScript.ownerDocument component.html補完します。
component.html

 var mainDoc = document.currentScript.ownerDocument; // mainDoc points to the document under component.html

webcomponents.jsを使用している場合、 document._currentScriptではなくwebcomponents.jsを使用しdocument.currentScript 。 currentScriptのアンダースコアは、この記号を使用しないとこのコンポーネントで動作できないブラウザーをサポートするために使用されます。
component.html

 var mainDoc = document._currentScript.ownerDocument; // mainDoc points to the document under component.html

スクリプトの最初にこれを記述することにより、ブラウザがHTMLインポートをサポートしていない場合でも、 component.htmlからdocument簡単にアクセスできdocument 。

 document._currentScript = document._currentScript || document.currentScript;

パフォーマンスの問題

インポートを使用する利点の1つは、インポートされたオブジェクトのページの負荷と処理順序を独立して分散できることです。ただし、HTMLコードが増加することも意味します。一般に、比較する点がいくつかあります。

依存関係

挿入する複数のドキュメントが同じライブラリにリンクしている場合はどうすればよいですか？例：

jQueryを両方のドキュメントにロードするため、これらのドキュメントをインポートすると、最終ドキュメントのライブラリが2回実行されます。
index.html

 <link rel="import" href="component1.html"> <link rel="import" href="component2.html">

component1.html

 <script src="js/jquery.js"></script>

component2.html

 <script src="js/jquery.js"></script>

この問題は、インポートで非常に簡単に解決されます。

scriptタグとは異なり、記事のオブジェクトは同じマテリアルをリロードしません。最後の例を見ると、HTML scriptタグをimportでラップするだけで十分であり、このリソースは2回ロードされません。

しかし、もう1つの問題があります。ダウンロードするファイルが増えました。 2つではなく、それ以上の場合はどうなりますか？

幸いなことに、Vulcanizeというツールが役立ちます。

ネットワーククエリ集約

Vulcanizeは、必要なドキュメントをダウンロードするためのネットワーク接続の数を減らすことにより、複数のHTMLファイルを1つに結合するためのツールです。 npmを使用してインストールし、コマンドラインで使用できます。 gruntとgulp類似物もあり、これを使用してVulcanizeをビルドプロセスの一部にすることができます。

index.htmlファイルを結合するには、次のコードを使用します。

 $ vulcanize -o vulcanized.html index.html

このコマンドを実行すると、すべての依存関係index.htmlがvulcanized.htmlファイルに接続されます。

このツールの詳細については、こちらをご覧ください。

インポートとテンプレート、シャドウDOM、およびカスタム要素の組み合わせ

前に説明した他の興味深いツールとともにHTML ipmportを使用しましょう。

これらのテクノロジーを知らない人のために：テンプレートを使用すると、ユーザー要素のコンテンツの定義を宣言的にすることができます。 Shadow DOMでは、要素の styles 、 IDおよびclasses少し異なる方法で使用できます。カスタム要素を使用すると、独自のHTMLタグを作成できます。悪くないですか？

インポートをネイティブWebコンポーネントと組み合わせると、モジュール性と再利用性が得られます。 linkタグのみを追加することで、誰でも使用できます。
x-component.html

 <template id="template"> <style> ... </style> <div id="container"> <img class="webcomponents" src="http://webcomponents.org/img/logo.svg"> <content select="h1"></content> </div> </template> <script> // This element will be registered to index.html // Because `document` here means the one in index.html var XComponent = document.registerElement('x-component', { prototype: Object.create(HTMLElement.prototype, { createdCallback: { value: function() { var root = this.createShadowRoot(); var template = document.querySelector('#template'); var clone = document.importNode(template.content, true); root.appendChild(clone); } } }) }); </script>

index.html

  ... <link rel="import" href="x-component.html"> </head> <body> <x-component> <h1>This is Custom Element</h1> </x-component> ...

x-component.html documentオブジェクトはindex.htmlと同じであることに注意してください。複雑なことを書く必要はありません。すべてが単独~~で機能します~~ 。

サポートされているブラウザ

HTMLインポートは、ChromeおよびOperaブラウザーでサポートされています。 Firefoxは現在、「より優先度の高いタスクがある」ため、この機能の追加を延期しています。

特定のブラウザとの互換性についてこのメソッドをテストするには、 chromestatus.comまたはcaniuse.comにアクセスしてください。他のブラウザーで動作するこのテクノロジーの機能を追加するには、 webcomponents.js （以前のplatform.js ）を使用します。

資源

そこで、HTMLのインポートを調べました。このトピックをさらに掘り下げたい場合は、こちらをご覧ください。

HTMLインポートの概要