🥗 🤘🏿 👊🏿 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インポートの概要