Impor HTML

Sertakan untuk web

Mengapa harus mengimpor?

Pikirkan tentang bagaimana Anda memuat berbagai jenis sumber daya di web. Untuk JS, kami memiliki <script src>. Untuk CSS, tujuan Anda mungkin adalah <link rel="stylesheet">. Untuk gambar, <img>-nya. Video memiliki <video>. Audio, <audio>... Langsung ke intinya! Sebagian besar konten web memiliki cara yang sederhana dan deklaratif untuk memuat dirinya sendiri. Tidak demikian untuk HTML. Berikut ini opsi untuk Anda:

  1. <iframe> - teruji dan benar tetapi berat. Konten iframe sepenuhnya berada dalam konteks yang terpisah dengan halaman Anda. Meskipun sebagian besar adalah fitur yang bagus, ini menciptakan tantangan tambahan (menyusutkan ukuran bingkai ke kontennya sulit, sangat membuat frustrasi untuk membuat skrip masuk/keluar, hampir tidak mungkin untuk ditata).
  2. AJAX - Saya suka xhr.responseType="document", tapi Anda bilang saya perlu JS untuk memuat HTML? Sepertinya ada yang salah.
  3. CrazyHacksTM - disematkan dalam string, disembunyikan sebagai komentar (misalnya <script type="text/html">). Hore!

Lihat ironinya? Konten web yang paling dasar, HTML, memerlukan upaya terbesar untuk digunakan. Untungnya, Komponen Web ada di sini untuk membuat kita kembali ke jalur.

Memulai

Impor HTML, bagian dari transmisi Komponen Web, adalah cara untuk menyertakan dokumen HTML dalam dokumen HTML lainnya. Anda juga tidak dibatasi pada markup. Impor juga dapat mencakup CSS, JavaScript, atau hal lain yang dapat dimuat oleh file .html. Dengan kata lain, hal ini menjadikan impor alat yang fantastis untuk memuat HTML/CSS/JS terkait.

Dasar-dasar

Sertakan impor di halaman Anda dengan mendeklarasikan <link rel="import">:

<head>
    <link rel="import" href="/path/to/imports/stuff.html">
</head>

URL impor disebut lokasi impor. Untuk memuat konten dari domain lain, lokasi impor harus mendukung CORS:

<!-- Resources on other origins must be CORS-enabled. -->
<link rel="import" href="http://example.com/elements.html">

Deteksi dan dukungan fitur

Untuk mendeteksi dukungan, periksa apakah .import ada di elemen <link>:

function supportsImports() {
    return 'import' in document.createElement('link');
}

if (supportsImports()) {
    // Good to go!
} else {
    // Use other libraries/require systems to load files.
}

Dukungan browser masih dalam tahap awal. Chrome 31 adalah browser pertama yang melihat implementasinya, tetapi vendor browser lain menunggu untuk melihat cara kerja Modul ES. Namun, untuk browser lain, polyfill webcomponents.js berfungsi dengan baik hingga semuanya didukung secara luas.

Memaketkan resource

Impor menyediakan konvensi untuk pemaketan HTML/CSS/JS (bahkan Impor HTML lainnya) ke dalam satu hasil. Ini adalah fitur intrinsik, tetapi sangat kuat. Jika Anda membuat tema, pustaka, atau hanya ingin membagi aplikasi menjadi potongan-potongan logis, memberikan satu URL kepada pengguna akan sangat menarik. Anda bahkan dapat mengirimkan seluruh aplikasi melalui impor. Pikirkan hal itu sejenak.

Contoh di dunia nyata adalah Bootstrap. Bootstrap terdiri dari file individual (bootstrap.css, bootstrap.js, font), memerlukan JQuery untuk pluginnya, dan menyediakan contoh markup. Developer menyukai fleksibilitas à la carte. Content ID memungkinkan mereka membeli bagian-bagian framework yang mereka ingin gunakan. Meskipun demikian, saya yakin JoeDeveloperTM khas Anda akan menggunakan cara yang mudah dan mendownload semua Bootstrap.

Impor sangat masuk akal untuk sesuatu seperti {i>Bootstrap<i}. Saya mempersembahkan kepada Anda, masa depan pemuatan Bootstrap:

<head>
    <link rel="import" href="bootstrap.html">
</head>

Pengguna cukup memuat tautan Impor HTML. Mereka tidak perlu repot dengan scatter-shot file. Sebagai gantinya, keseluruhan Bootstrap dikelola dan digabungkan dalam sebuah impor, bootstrap.html:

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-tooltip.js"></script>
<script src="bootstrap-dropdown.js"></script>
...

<!-- scaffolding markup -->
<template>
    ...
</template>

Biarkan ini duduk. Ini adalah hal yang menarik.

Peristiwa pemuatan/error

Elemen <link> mengaktifkan peristiwa load saat impor berhasil dimuat dan onerror saat upaya gagal (misalnya jika resource 404s).

File impor akan langsung dimuat. Cara mudah untuk menghindari kerumitan adalah dengan menggunakan atribut onload/onerror:

<script>
    function handleLoad(e) {
    console.log('Loaded import: ' + e.target.href);
    }
    function handleError(e) {
    console.log('Error loading import: ' + e.target.href);
    }
</script>

<link rel="import" href="file.html"
        onload="handleLoad(event)" onerror="handleError(event)">

Atau, jika Anda membuat impor secara dinamis:

var link = document.createElement('link');
link.rel = 'import';
// link.setAttribute('async', ''); // make it async!
link.href = 'file.html';
link.onload = function(e) {...};
link.onerror = function(e) {...};
document.head.appendChild(link);

Menggunakan konten

Menyertakan impor pada laman tidak berarti "plot konten file tersebut di sini". Ini berarti "parser, ambil dokumen ini supaya saya bisa menggunakannya". Untuk benar-benar menggunakan konten, Anda harus mengambil tindakan dan menulis naskah.

Momen aha! yang penting adalah menyadari bahwa impor hanyalah dokumen. Bahkan, konten impor disebut dokumen impor. Anda dapat memanipulasi isi impor menggunakan DOM API standar.

link.import

Untuk mengakses konten impor, gunakan properti .import elemen link:

var content = document.querySelector('link[rel="import"]').import;

link.import adalah null dalam kondisi berikut:

  • Browser tidak mendukung Impor HTML.
  • <link> tidak memiliki rel="import".
  • <link> belum ditambahkan ke DOM.
  • <link> telah dihapus dari DOM.
  • Resource tidak kompatibel dengan CORS.

Contoh lengkap

Misalnya warnings.html berisi:

<div class="warning">
    <style>
    h3 {
        color: red !important;
    }
    </style>
    <h3>Warning!
    <p>This page is under construction
</div>

<div class="outdated">
    <h3>Heads up!
    <p>This content may be out of date
</div>

Pengimpor dapat mengambil bagian tertentu dari dokumen ini dan meng-clone dokumen ini ke halaman mereka:

<head>
    <link rel="import" href="warnings.html">
</head>
<body>
    ...
    <script>
    var link = document.querySelector('link[rel="import"]');
    var content = link.import;

    // Grab DOM from warning.html's document.
    var el = content.querySelector('.warning');

    document.body.appendChild(el.cloneNode(true));
    </script>
</body>

Pembuatan skrip dalam impor

Impor tidak ada di dokumen utama. Mereka satelit untuk itu. Namun, impor Anda tetap dapat bertindak di halaman utama meskipun dokumen utama berkuasa. Impor dapat mengakses DOM-nya sendiri dan/atau DOM dari halaman yang mengimpornya:

Contoh - import.html yang menambahkan salah satu stylesheet ke halaman utama

<link rel="stylesheet" href="http://www.example.com/styles.css">
<link rel="stylesheet" href="http://www.example.com/styles2.css">

<style>
/* Note: <style> in an import apply to the main
    document by default. That is, style tags don't need to be
    explicitly added to the main document. */
#somecontainer {
color: blue;
}
</style>
...

<script>
// importDoc references this import's document
var importDoc = document.currentScript.ownerDocument;

// mainDoc references the main document (the page that's importing us)
var mainDoc = document;

// Grab the first stylesheet from this import, clone it,
// and append it to the importing document.
    var styles = importDoc.querySelector('link[rel="stylesheet"]');
    mainDoc.head.appendChild(styles.cloneNode(true));
</script>

Perhatikan apa yang terjadi. Skrip di dalam impor merujuk ke dokumen yang diimpor (document.currentScript.ownerDocument), dan menambahkan bagian dokumen tersebut ke halaman impor (mainDoc.head.appendChild(...)). Cukup mengganggu jika Anda bertanya kepada saya.

Aturan JavaScript dalam impor:

  • Skrip dalam impor dijalankan dalam konteks jendela yang berisi document yang sedang diimpor. Jadi, window.document merujuk pada dokumen halaman utama. Hal ini memiliki dua akibat yang berguna:
    • fungsi yang ditentukan dalam impor akan berakhir pada window.
    • Anda tidak perlu melakukan hal yang sulit seperti menambahkan blok <script> impor ke halaman utama. Sekali lagi, skrip dijalankan.
  • Impor tidak memblokir penguraian halaman utama. Namun, skrip di dalamnya diproses secara berurutan. Ini berarti Anda mendapatkan perilaku seperti penundaan sambil mempertahankan urutan skrip yang tepat. Informasi selengkapnya dapat dibaca di bawah.

Menghadirkan Komponen Web

Desain Impor HTML sangat cocok untuk memuat konten yang dapat digunakan kembali di web. Secara khusus, ini merupakan cara yang ideal untuk mendistribusikan Komponen Web. Semuanya dari HTML <template> dasar hingga Custom Elements yang sangat bagus dengan Shadow DOM [1, 2, 3]. Jika teknologi ini digunakan bersama, impor menjadi #include untuk Komponen Web.

Menyertakan template

Elemen Template HTML sangat sesuai untuk Impor HTML. <template> sangat bagus untuk menentukan bagian markup untuk digunakan oleh aplikasi impor sesuai keinginan. Menggabungkan konten dalam <template> juga memberi Anda manfaat tambahan yaitu membuat konten tidak berfungsi hingga digunakan. Artinya, skrip tidak berjalan sampai template ditambahkan ke DOM). Wow!

import.html

<template>
    <h1>Hello World!</h1>
    <!-- Img is not requested until the <template> goes live. -->
    <img src="world.png">
    <script>alert("Executed when the template is activated.");</script>
</template>

index.html

<head>
    <link rel="import" href="import.html">
</head>
<body>
    <div id="container"></div>
    <script>
    var link = document.querySelector('link[rel="import"]');

    // Clone the <template> in the import.
    var template = link.import.querySelector('template');
    var clone = document.importNode(template.content, true);

    document.querySelector('#container').appendChild(clone);
    </script>
</body>

Mendaftarkan elemen kustom

Elemen Khusus adalah teknologi Komponen Web lain yang bekerja sangat baik dengan Impor HTML. Impor dapat menjalankan skrip, jadi mengapa tidak menentukan + mendaftarkan elemen kustom Anda sehingga pengguna tidak perlu melakukannya? Sebut saja...", pendaftaran otomatis".

elements.html

<script>
    // Define and register <say-hi>.
    var proto = Object.create(HTMLElement.prototype);

    proto.createdCallback = function() {
    this.innerHTML = 'Hello, <b>' +
                        (this.getAttribute('name') || '?') + '</b>';
    };

    document.registerElement('say-hi', {prototype: proto});
</script>

<template id="t">
    <style>
    ::content > * {
        color: red;
    }
    </style>
    <span>I'm a shadow-element using Shadow DOM!</span>
    <content></content>
</template>

<script>
    (function() {
    var importDoc = document.currentScript.ownerDocument; // importee

    // Define and register <shadow-element>
    // that uses Shadow DOM and a template.
    var proto2 = Object.create(HTMLElement.prototype);

    proto2.createdCallback = function() {
        // get template in import
        var template = importDoc.querySelector('#t');

        // import template into
        var clone = document.importNode(template.content, true);

        var root = this.createShadowRoot();
        root.appendChild(clone);
    };

    document.registerElement('shadow-element', {prototype: proto2});
    })();
</script>

Impor ini menentukan (dan mendaftarkan) dua elemen, <say-hi> dan <shadow-element>. Yang pertama menunjukkan elemen kustom dasar yang mendaftarkan dirinya sendiri di dalam impor. Contoh kedua menunjukkan cara menerapkan elemen kustom yang membuat Shadow DOM dari <template>, lalu mendaftarkannya sendiri.

Bagian terbaik tentang mendaftarkan elemen khusus dalam impor HTML adalah pengimpor dengan mudah mendeklarasikan elemen Anda di halamannya. Tidak perlu kabel.

index.html

<head>
    <link rel="import" href="elements.html">
</head>
<body>
    <say-hi name="Eric"></say-hi>
    <shadow-element>
    <div>( I'm in the light dom )</div>
    </shadow-element>
</body>

Menurut pendapat saya, alur kerja ini saja menjadikan Impor HTML cara yang ideal untuk berbagi Komponen Web.

Mengelola dependensi dan sub-impor

Sub-impor

Satu impor dapat menyertakan impor yang lain. Misalnya, jika Anda ingin menggunakan kembali atau memperluas komponen lain, gunakan impor untuk memuat elemen lainnya.

Berikut adalah contoh nyata dari Polymer. Ini adalah komponen tab baru (<paper-tabs>) yang menggunakan kembali komponen tata letak dan pemilih. Dependensi dikelola menggunakan Impor HTML.

paper-tabs.html (disederhanakan):

<link rel="import" href="iron-selector.html">
<link rel="import" href="classes/iron-flex-layout.html">

<dom-module id="paper-tabs">
    <template>
    <style>...</style>
    <iron-selector class="layout horizonta center">
        <content select="*"></content>
    </iron-selector>
    </template>
    <script>...</script>
</dom-module>

Developer aplikasi dapat mengimpor elemen baru ini menggunakan:

<link rel="import" href="paper-tabs.html">
<paper-tabs></paper-tabs>

Saat <iron-selector2> yang baru dan lebih keren hadir di masa mendatang, Anda dapat menukar <iron-selector> dan langsung menggunakannya. Anda tidak akan merusak pengguna berkat impor dan komponen web.

Manajemen ketergantungan

Kita semua tahu bahwa memuat JQuery lebih dari sekali per halaman akan menyebabkan error. Bukankah ini akan menjadi masalah yang besar untuk Komponen Web jika beberapa komponen menggunakan library yang sama? Tidak jika kita menggunakan Impor HTML! Mereka dapat digunakan untuk mengelola dependensi.

Dengan menggabungkan library dalam Impor HTML, Anda secara otomatis menghapus duplikat sumber daya. Dokumen hanya diuraikan sekali. Skrip hanya dijalankan satu kali. Sebagai contoh, katakanlah Anda menentukan sebuah impor, jquery.html, yang akan memuat salinan JQuery.

jquery.html

<script src="http://cdn.com/jquery.js"></script>

Impor ini dapat digunakan kembali dalam impor berikutnya seperti:

import2.html

<link rel="import" href="jquery.html">
<div>Hello, I'm import 2</div>

ajax-element.html

<link rel="import" href="jquery.html">
<link rel="import" href="import2.html">

<script>
    var proto = Object.create(HTMLElement.prototype);

    proto.makeRequest = function(url, done) {
    return $.ajax(url).done(function() {
        done();
    });
    };

    document.registerElement('ajax-element', {prototype: proto});
</script>

Bahkan halaman utama itu sendiri dapat menyertakan jquery.html jika membutuhkan library:

<head>
    <link rel="import" href="jquery.html">
    <link rel="import" href="ajax-element.html">
</head>
<body>

...

<script>
    $(document).ready(function() {
    var el = document.createElement('ajax-element');
    el.makeRequest('http://example.com');
    });
</script>
</body>

Meskipun jquery.html disertakan dalam banyak hierarki impor yang berbeda, dokumennya hanya diambil dan diproses satu kali oleh browser. Pemeriksaan panel jaringan membuktikan hal ini:

jquery.html diminta satu kali
jquery.html diminta sekali

Pertimbangan performa

Impor HTML benar-benar mengagumkan tetapi seperti halnya teknologi web baru lainnya, Anda harus menggunakannya dengan bijak. Praktik terbaik pengembangan web masih berlaku. Berikut ini beberapa hal yang harus diperhatikan.

Menggabungkan impor

Mengurangi permintaan jaringan selalu penting. Jika Anda memiliki banyak link impor tingkat atas, pertimbangkan untuk menggabungkannya ke dalam satu resource dan impor file tersebut.

Vulcanize adalah alat build npm dari tim Polymer yang secara rekursif meratakan kumpulan Impor HTML menjadi satu file. Anggap saja sebagai langkah build penyambungan untuk Komponen Web.

Impor memanfaatkan penyimpanan cache browser

Banyak orang lupa bahwa tumpukan jaringan browser telah disesuaikan dengan baik selama bertahun-tahun. Impor (dan sub-impor) juga memanfaatkan logika ini. Impor http://cdn.com/bootstrap.html mungkin memiliki sub-resource, tetapi akan di-cache.

Konten hanya berguna jika Anda menambahkannya

Anggap konten sebagai tidak aktif sampai Anda meminta layanannya. Ambil stylesheet normal yang dibuat secara dinamis:

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'styles.css';

Browser tidak akan meminta styles.css hingga link ditambahkan ke DOM:

document.head.appendChild(link); // browser requests styles.css

Contoh lainnya adalah markup yang dibuat secara dinamis:

var h2 = document.createElement('h2');
h2.textContent = 'Booyah!';

h2 relatif tidak bermakna sampai Anda menambahkannya ke DOM.

Konsep yang sama berlaku untuk dokumen impor. Kecuali jika Anda menambahkan kontennya ke DOM, objek ini tidak beroperasi. Bahkan, satu-satunya hal yang "mengeksekusi" di dokumen impor secara langsung adalah <script>. Lihat pembuatan skrip dalam impor.

Mengoptimalkan pemuatan asinkron

Mengimpor rendering blok

Mengimpor rendering blok halaman utama. Ini mirip dengan apa yang dilakukan <link rel="stylesheet">. Alasan browser memblokir rendering pada stylesheet sejak awal adalah untuk meminimalkan FOUC. Impor berperilaku serupa karena dapat berisi stylsheet.

Agar benar-benar asinkron dan tidak memblokir parser atau rendering, gunakan atribut async:

<link rel="import" href="/path/to/import_that_takes_5secs.html" async>

Penyebab async bukan merupakan default untuk Impor HTML adalah karena mengharuskan developer untuk melakukan lebih banyak pekerjaan. Sinkron secara default berarti bahwa Impor HTML yang memiliki definisi elemen khusus di dalamnya dijamin untuk dimuat dan ditingkatkan, secara berurutan. Di dunia yang sepenuhnya asinkron, developer harus mengelola tarian tersebut dan mengupgrade waktu sendiri.

Anda juga dapat membuat impor asinkron, secara dinamis:

var l = document.createElement('link');
l.rel = 'import';
l.href = 'elements.html';
l.setAttribute('async', '');
l.onload = function(e) { ... };

Impor tidak memblokir penguraian

Impor tidak memblokir penguraian halaman utama. Skrip di dalam impor diproses secara berurutan, tetapi tidak memblokir halaman impor. Ini berarti Anda mendapatkan perilaku seperti penundaan sambil mempertahankan urutan skrip yang tepat. Salah satu manfaat menempatkan impor di <head> adalah memungkinkan parser mulai mengerjakan konten sesegera mungkin. Dengan demikian, sangat penting untuk mengingat <script> di dokumen utama masih terus memblokir halaman. <script> pertama setelah impor akan memblokir rendering halaman. Hal itu karena impor dapat memiliki skrip di dalamnya yang perlu dieksekusi sebelum skrip di halaman utama.

<head>
    <link rel="import" href="/path/to/import_that_takes_5secs.html">
    <script>console.log('I block page rendering');</script>
</head>

Bergantung pada struktur aplikasi dan kasus penggunaan Anda, ada beberapa cara untuk mengoptimalkan perilaku asinkron. Teknik di bawah ini mengurangi pemblokiran rendering halaman utama.

Skenario #1 (lebih disukai): Anda tidak memiliki skrip dalam <head> atau inline di <body>

Rekomendasi saya untuk menempatkan <script> adalah jangan langsung mengikuti impor Anda. Pindahkan skrip setinggi mungkin di akhir permainan...tetapi Anda sudah melakukan praktik terbaik itu, BUKAN KAMU!? ;)

Berikut contohnya:

<head>
    <link rel="import" href="/path/to/import.html">
    <link rel="import" href="/path/to/import2.html">
    <!-- avoid including script -->
</head>
<body>
    <!-- avoid including script -->

    <div id="container"></div>

    <!-- avoid including script -->
    ...

    <script>
    // Other scripts n' stuff.

    // Bring in the import content.
    var link = document.querySelector('link[rel="import"]');
    var post = link.import.querySelector('#blog-post');

    var container = document.querySelector('#container');
    container.appendChild(post.cloneNode(true));
    </script>
</body>

Semuanya ada di bagian bawah.

Skenario 1.5: impor menambahkan dirinya sendiri

Opsi lainnya adalah meminta impor menambahkan kontennya sendiri. Jika penulis impor menetapkan kontrak untuk diikuti oleh developer aplikasi, impor dapat menambahkan dirinya sendiri ke area halaman utama:

import.html:

<div id="blog-post">...</div>
<script>
    var me = document.currentScript.ownerDocument;
    var post = me.querySelector('#blog-post');

    var container = document.querySelector('#container');
    container.appendChild(post.cloneNode(true));
</script>

index.html

<head>
    <link rel="import" href="/path/to/import.html">
</head>
<body>
    <!-- no need for script. the import takes care of things -->
</body>

Skenario #2: Anda memiliki skrip di <head> atau dijadikan inline di <body>

Jika Anda memiliki impor yang membutuhkan waktu lama untuk dimuat, <script> pertama yang mengikutinya di halaman akan memblokir halaman agar tidak dirender. Misalnya, Google Analytics merekomendasikan agar Anda menempatkan kode pelacakan di <head>. Jika tidak dapat menghindari penempatan <script> di <head>, penambahan impor secara dinamis akan mencegah pemblokiran halaman:

<head>
    <script>
    function addImportLink(url) {
        var link = document.createElement('link');
        link.rel = 'import';
        link.href = url;
        link.onload = function(e) {
        var post = this.import.querySelector('#blog-post');

        var container = document.querySelector('#container');
        container.appendChild(post.cloneNode(true));
        };
        document.head.appendChild(link);
    }

    addImportLink('/path/to/import.html'); // Import is added early :)
    </script>
    <script>
    // other scripts
    </script>
</head>
<body>
    <div id="container"></div>
    ...
</body>

Atau, tambahkan impor di dekat akhir <body>:

<head>
    <script>
    // other scripts
    </script>
</head>
<body>
    <div id="container"></div>
    ...

    <script>
    function addImportLink(url) { ... }

    addImportLink('/path/to/import.html'); // Import is added very late :(
    </script>
</body>

Hal-hal yang perlu diingat

  • mimetype impor adalah text/html.

  • Resource dari origin lain harus diaktifkan dengan CORS.

  • Impor dari URL yang sama diambil dan diuraikan sekali. Artinya, skrip dalam impor hanya dijalankan saat pertama kali impor terlihat.

  • Skrip dalam impor diproses secara berurutan, tetapi tidak memblokir penguraian dokumen utama.

  • Link impor tidak berarti "#include the content here". Ini berarti "parser, keluarkan ambil dokumen ini agar saya bisa menggunakannya nanti". Sementara skrip dieksekusi pada waktu impor, stylesheet, markup, dan resource lainnya harus ditambahkan ke halaman utama secara eksplisit. Perhatikan bahwa <style> tidak perlu ditambahkan secara eksplisit. Ini adalah perbedaan besar antara Impor HTML dan <iframe>, yang bertuliskan "muat dan render konten ini di sini".

Kesimpulan

Impor HTML memungkinkan pemaketan HTML/CSS/JS sebagai satu resource. Meskipun jika itu sendiri bermanfaat, ide ini akan menjadi sangat ampuh dalam dunia Komponen Web. Developer dapat membuat komponen yang dapat digunakan kembali untuk digunakan dan dibawa orang lain ke aplikasi mereka sendiri, semua dikirim melalui <link rel="import">.

Impor HTML adalah konsep sederhana, tetapi memungkinkan sejumlah kasus penggunaan yang menarik untuk platform.

Kasus penggunaan

  • Distribusikan terkait HTML/CSS/JS sebagai satu paket. Secara teoritis, Anda dapat mengimpor seluruh aplikasi web ke aplikasi web lain.
  • Organisasi kode - mengelompokkan konsep secara logis ke dalam berbagai file, sehingga mendorong modularitas dan penggunaan kembali**.
  • Tayangkan satu atau beberapa definisi Elemen Kustom. Impor dapat digunakan untuk register dan menyertakannya dalam aplikasi. Hal ini mempraktikkan pola software yang baik dan menjaga antarmuka/definisi elemen tetap terpisah dari cara penggunaannya.
  • Mengelola dependensi - resource dihapus duplikatnya secara otomatis.
  • Skrip bagian - sebelum diimpor, file JS berukuran besar akan diurai sepenuhnya agar dapat mulai berjalan, yang ternyata lambat. Dengan impor, library dapat mulai berfungsi segera setelah potongan A diuraikan. Latensi lebih sedikit.
// TODO: DevSite - Code sample removed as it used inline event handlers

  • Memparalelkan penguraian HTML - untuk pertama kalinya browser dapat menjalankan dua (atau lebih) parser HTML secara paralel.

  • Mengaktifkan peralihan antara mode debug dan non-debug di aplikasi, hanya dengan mengubah target impor itu sendiri. Aplikasi Anda tidak perlu mengetahui apakah target impor adalah resource yang dipaketkan/dikompilasi atau hierarki impor.