Web components enable you to build great websites
through they use of reusable components.
But what does it take to build a web component?
My name is Ejii, and today I'm going
to give you an overview of HTML imports.
If you have worked with UI libraries
like jQuery UI or bootstrap, you know
that they require multiple tags for loading all of the required
resources, such as scripts, stylesheets, or web fonts.
Wouldn't it be nice if you could load them
as a component with a single tag because they
provide a single set of features?
HTML imports allow you to import an HTML file that
includes those required resources in line,
or as a script tag or link tag, in one place.
At the time of this recording, HTML imports
have landed in Chrome and Opera.
Firefox supports it in Nightly behind a flag.
But support for web components is changing weekly,
so be sure to check chromestatus.com
for an up to date browser support table.
To detect the availability of HTML imports,
check if link tag has an imports property.
For unsupported browsers, you can use platform.js,
a collection of web components polyfills
made available as polymer library.
This will automatically detect the availability of the HTML
imports and populate if necessary.
Using HTML imports is simple.
Just add link tag with rel equals import to the HTML.
Instead linked HTML, you can add any HTML markups as you wish,
including ones that load, additional resources
such as scripts, links, styles, and so on.
You don't need doc type HTML head or body on imported HTML.
HTML markups will be parsed and executed on load.
You may wonder how browsers manage
loading multiple resources using HTML imports.
HTML imports behave just like defer attribute on script tag.
On loading HTML following script tags,
we'll wait for all the scripts in the imported HTML
to be loaded and executed.
This is a visualization of how it works.
First, start loading index HTML.
As soon as the browser finds the import,
it starts parsing imported HTML.
Meanwhile, parsing index HTML continues to move on
but blocked on the next script tag,
because the browser waits for all script tags inside imported
HTML to be loaded and executed.
script1.js will be loaded and executed, then script2.js.
Now the control comes back to index HTML.
Load and execute script3.js.
Note that if you add async attribute to HTML import,
it won't wait for the imported HTML to be loaded and executed.
The reason async is not default is
for ease of use for developers.
If you care about performance, please bear in mind
that there's always an option to use async attribute.
One important thing you should keep in mind when using HTML
imports is that you basically cannot import files from
outside of your origin.
If you wish to import resources from other origins,
the server needs to support CORS, Cross Origin
Resource Sharing.
To learn more about CORS, please take out HTML5 Rocks article,
"Using CORS."
HTML imports execute scripts, load styles and fonts right
when imported HTML is loaded.
But sometimes you want to access those resources and objects
using JavaScript.
Actually, the window object and the document object
in an imported document are identical to the main document.
So how do we access resources inside import HTML
from index HTML?
And how do we access resources inside index HTML
from import HTML?
In order to access the document object
of imported HTML from the main document,
use import property of the link element.
Note that you can use onload event to make sure
that that content is already loaded before accessing
its content, just like other link text.
In order to access the document object or the main HTML
from the imported document, you can use document currentScript
ownerDocument.
If you are using platform.js, you
need to insert an underscore before currentScript
due to polyfill restrictions.
If you are already familiar with web components
and actively using a lot of components,
your HTML could look something like this.
Wow, so many imports.
This doesn't look the best.
Loading many resources mean that there are same or even more
network connections when loading the page.
There are a couple of things to note here.
Solving dependency on web components is kind of tricky.
It can import same resources multiple times, like this.
But don't worry, HTML imports take care of it.
Documents from same URL will be fetched and processed
only once.
If you care about performance, you
will want to reduce the number of connections to the server.
There's a library called Vulcanize to solve the problem.
Vulcanize recursively pulls in all your imports,
flattens their dependencies, and spits out
something that can potentially reduce the number of network
requests your app makes.
Now let me show you how HTML import works
by extending the example code we used in the previous videos.
I'm not going to explain how templates, Shadow
DOM, and custom elements work.
But if you're curious and haven't watched
the previous videos, please do so.
One of the benefits of using web components
is that you can isolate and reuse components.
HTML imports help that by moving components code
to a separate file.
In this case, x-component HTML, which uses template,
custom elements, and Shadow DOM.
This file will be loaded autonomously when imported.
Once you have a separate HTML file that builds a web
component, you can simply import it by using HTML imports,
and the result will look the same as before.
So this is HTML imports.
To learn more about HTML imports,
be sure to read the HTML5 Rocks article
written by Eric Bidelman.
Thank you for watching.