Impor HTML

Menyertakan untuk web

Mengapa impor?

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

  1. <iframe> - sudah terbukti, tetapi berat. Konten iframe berada dalam konteks yang terpisah sepenuhnya dari halaman Anda. Meskipun sebagian besar fitur itu bagus, tapi menciptakan tantangan tambahan (menyusutkan ukuran {i>frame<i} ke kontennya memang sulit, sangat membuat frustrasi terhadap skrip masuk/keluar, hampir tidak mungkin untuk ditata).
  2. AJAX - Saya suka xhr.responseType="document", tetapi Anda mengatakan saya memerlukan JS untuk memuat HTML? Sepertinya ada yang salah.
  3. CrazyHacks™ - disematkan dalam string, disembunyikan sebagai komentar (misalnya, <script type="text/html">). Yuck!

Lihat ironisnya? Konten web yang paling dasar, HTML, memerlukan upaya terbesar untuk digunakan. Untungnya, Komponen Web untuk membantu kita kembali ke jalur yang benar.

Memulai

Impor HTML, bagian dari transmisi Komponen Web, adalah cara untuk menyertakan dokumen HTML dalam dokumen HTML lainnya. Anda juga tidak dibatasi oleh markup. Impor juga dapat mencakup CSS, JavaScript, atau apa pun yang dapat dimuat dalam file .html. Dengan kata lain, hal ini menjadikan impor sebagai 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 mengaktifkan 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 menerapkannya, tetapi vendor browser lain menunggu untuk melihat bagaimana ES Modules berjalan. Namun, untuk browser lain, polyfill webcomponents.js akan berfungsi dengan baik hingga semuanya didukung secara luas.

Memaketkan resource

Impor menyediakan konvensi untuk memaketkan HTML/CSS/JS (bahkan Impor HTML lainnya) menjadi satu hasil. Ini adalah fitur intrinsik, tetapi sangat efektif. Jika Anda sedang 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 dunia nyata adalah Bootstrap. Bootstrap terdiri dari file individual (bootstrap.css, bootstrap.js, font), memerlukan JQuery untuk plugin-nya, dan memberikan contoh markup. Developer menyukai fleksibilitas à la carte. Hal ini memungkinkan mereka menggunakan bagian framework yang mereka inginkan. Meskipun demikian, saya bertaruh bahwa JoeDeveloperTM biasanya Anda dapat melakukannya dengan mudah dan mendownload semua Bootstrap.

Impor sangat masuk akal untuk sesuatu seperti Bootstrap. Kami persembahkan untuk Anda, masa depan pemuatan Bootstrap:

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

Pengguna cukup memuat link Impor HTML. Mereka tidak perlu repot dengan file yang tersebar. Sebagai gantinya, seluruh Bootstrap dikelola dan digabungkan dalam 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>

Tunggu sebentar. Ini adalah hal yang menarik.

Peristiwa pemuatan/error

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

Impor akan langsung dimuat. Cara mudah untuk menghindari masalah adalah 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 di halaman tidak berarti "masukkan konten file tersebut di sini". Ini berarti "parser, pergi dan ambil dokumen ini agar saya dapat menggunakannya". Untuk benar-benar menggunakan konten, Anda harus mengambil tindakan dan menulis skrip.

Momen aha! yang penting adalah menyadari bahwa impor hanyalah dokumen. Faktanya, konten impor disebut dokumen impor. Anda dapat memanipulasi inti 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 ini tidak mendukung CORS.

Contoh lengkap

Misalkan 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-nya 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 dalam dokumen utama. Mereka adalah satelit. Namun, impor Anda tetap dapat bertindak di halaman utama meskipun dokumen utama berkuasa. Impor dapat mengakses DOM-nya sendiri dan/atau DOM halaman yang mengimpornya:

Contoh - import.html yang menambahkan salah satu stylesheet-nya 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 di sini. Skrip di dalam impor mereferensikan dokumen yang diimpor (document.currentScript.ownerDocument), dan menambahkan bagian dari dokumen tersebut ke halaman impor (mainDoc.head.appendChild(...)). Cukup rumit jika Anda bertanya kepada saya.

Aturan JavaScript dalam impor:

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

Mengirimkan Komponen Web

Desain Impor HTML sangat cocok untuk memuat konten yang dapat digunakan kembali di web. Secara khusus, ini adalah cara yang ideal untuk mendistribusikan Komponen Web. Semuanya, mulai dari <template> HTML dasar hingga Elemen Kustom yang lengkap dengan Shadow DOM [1, 2, 3]. Jika teknologi ini digunakan secara bersamaan, impor akan menjadi #include untuk Komponen Web.

Menyertakan template

Elemen Template HTML sangat cocok untuk Impor HTML. <template> sangat cocok untuk membuat scaffolding bagian markup agar dapat digunakan oleh aplikasi impor sesuai keinginan. Menggabungkan konten dalam <template> juga memberi Anda manfaat tambahan berupa konten yang tidak aktif hingga digunakan. Artinya, skrip tidak berjalan hingga 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

Custom Elements adalah teknologi Komponen Web lain yang berfungsi dengan sangat baik dengan HTML Imports. Impor dapat mengeksekusi skrip, jadi mengapa tidak menentukan + mendaftarkan elemen kustom Anda agar pengguna tidak perlu melakukannya? Beri nama…"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 menampilkan elemen kustom dasar yang mendaftarkan dirinya sendiri di dalam impor. Contoh kedua menunjukkan cara menerapkan elemen kustom yang membuat Shadow DOM dari <template>, lalu mendaftarkan dirinya sendiri.

Bagian terbaik dari mendaftarkan elemen kustom di dalam impor HTML adalah bahwa pengimpor cukup 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 saya, alur kerja ini saja menjadikan HTML Imports sebagai cara yang ideal untuk membagikan Komponen Web.

Mengelola dependensi dan sub-impor

Sub-impor

Hal ini berguna jika satu impor menyertakan impor lainnya. 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>

Jika <iron-selector2> baru yang lebih keren muncul pada masa mendatang, Anda dapat mengganti <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 hal ini akan menjadi masalah besar untuk Komponen Web jika beberapa komponen menggunakan library yang sama? Hal ini tidak terjadi jika kita menggunakan Impor HTML. Pengelola dependensi dapat digunakan untuk mengelola dependensi.

Dengan menggabungkan library dalam Impor HTML, Anda akan otomatis menghapus duplikat resource. Dokumen hanya diuraikan satu kali. Skrip hanya dieksekusi satu kali. Misalnya, Anda menentukan impor, jquery.html, yang memuat salinan JQuery.

jquery.html

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

Impor ini dapat digunakan kembali dalam impor berikutnya seperti ini:

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 memerlukan 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 sekali oleh browser. Memeriksa panel jaringan membuktikan hal ini:

jquery.html diminta satu kali
jquery.html diminta satu kali

Pertimbangan performa

Impor HTML benar-benar hebat, namun seperti halnya teknologi web baru lainnya, Anda harus menggunakannya dengan bijak. Praktik terbaik pengembangan web tetap berlaku. Berikut beberapa hal yang perlu diperhatikan.

Menggabungkan impor

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

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

Impor memanfaatkan penyimpanan dalam 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 disimpan dalam cache.

Konten hanya berguna jika Anda menambahkannya

Anggap konten sebagai tidak aktif hingga Anda memanggil 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. Jika Anda tidak menambahkan kontennya ke DOM, dokumen tersebut tidak akan berfungsi. Faktanya, satu-satunya hal yang "dieksekusi" langsung dalam dokumen impor adalah <script>. Lihat pembuatan skrip dalam impor.

Mengoptimalkan untuk pemuatan asinkron

Mengimpor rendering blok

Impor memblokir rendering halaman utama. Hal ini mirip dengan yang dilakukan <link rel="stylesheet">. Alasan browser memblokir rendering pada stylesheet adalah untuk meminimalkan FOUC. Impor berperilaku serupa karena dapat berisi stylesheet.

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

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

Alasan async tidak menjadi default untuk Impor HTML adalah karena mengharuskan developer melakukan lebih banyak pekerjaan. Sinkron secara default berarti bahwa Impor HTML yang memiliki definisi elemen kustom di dalamnya dijamin untuk dimuat dan diupgrade secara berurutan. Dalam dunia yang sepenuhnya asinkron, developer harus mengelola sendiri sinkronisasi dan pengaturan waktu upgrade.

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. Artinya, Anda mendapatkan perilaku seperti penundaan sekaligus mempertahankan urutan skrip yang tepat. Salah satu manfaat menempatkan impor di <head> adalah memungkinkan parser mulai mengerjakan konten sesegera mungkin. Dengan demikian, penting untuk diingat bahwa <script> dalam dokumen utama masih terus memblokir halaman. <script> pertama setelah impor akan memblokir rendering halaman. Hal itu karena impor dapat memiliki skrip di dalamnya yang harus 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 memitigasi pemblokiran rendering halaman utama.

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

Rekomendasi saya untuk menempatkan <script> adalah jangan langsung mengikuti proses impor. Pindahkan skrip selambat mungkin dalam game…tetapi Anda sudah melakukan praktik terbaik tersebut, BUKAN? ;)

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 untuk menambahkan kontennya sendiri. Jika penulis impor membuat kontrak yang harus diikuti developer aplikasi, impor dapat menambahkan dirinya 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 disisipkan 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 menyarankan untuk menempatkan kode pelacakan di <head>. Jika Anda tidak dapat menghindari penempatan <script> di <head>, menambahkan 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>

Yang perlu diingat

  • Mimetype impor adalah text/html.

  • Resource dari origin lain harus mengaktifkan CORS.

  • Impor dari URL yang sama diambil dan diuraikan satu kali. Artinya, skrip dalam impor hanya dieksekusi saat pertama kali impor dilihat.

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

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

Kesimpulan

Impor HTML memungkinkan penggabungan HTML/CSS/JS sebagai satu resource. Meskipun berguna, ide ini menjadi sangat efektif di dunia Komponen Web. Developer dapat membuat komponen yang dapat digunakan kembali untuk digunakan dan dibawa orang lain ke aplikasi mereka sendiri, yang semuanya dikirimkan melalui <link rel="import">.

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

Kasus penggunaan

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

  • Memparalelkan penguraian HTML - 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.