Introduction to HTML Import
Template, Shadow DOM, and Custom Elements let you build UI components easier and faster. However, this is not the most efficient way to load HTML, CSS, and JavaScript resources separately.
Downloading jQuery UI or Bootstrap libraries requires separate tags for javascript, css, and web fonts. Everything becomes easier when using the Web Components with several dependencies.
HTML imports allow you to download resources as a collection of several files of this type.
I suggest you read the video on this topic.
')
To load an HTML file, add the
You can download any resources, including scripts, style sheets and fonts:
Browsers process content in order. This means that the
In order to avoid blocking of the remaining HTML with the
So how do imports work?
The script inside the HTML import works like a regular
Note that adding the
In fact, HTML imports cannot transfer the entire file from another source. For example, you cannot import into http://example.com/ page http://webcomponents.org/ .
To avoid this limitation, use CORS (Cross Origin Resource Sharing). To learn more about this technology, read this article .
Window and
Earlier, I mentioned that the imported JavaScript will run on the page. Unfortunately, this can not be said about the imported HTML files. For this to happen with them, you need to add a few scripts.
Beware of the fact that the
Using the previously written code as an example, let's make the
Let's make some small changes to our files.
To get the
If you use
By writing this at the beginning of your script, you can easily access the
One of the advantages of using imports is the ability to independently distribute the page load and the processing order of imported objects. But it also means that the HTML code will increase. In general, there are several items to compare:
What to do if several inserted documents refer to the same library? For example:
You load jQuery in both documents, because of which, when importing these documents, the library in the final document will be executed twice.
This problem is extremely easy to solve in imports.
Unlike the
But there is another problem: now there are more files for download. What to do if there are not two, but much more?
Fortunately, a tool called “Vulcanize” comes to our rescue.
Vulcanize is a tool to merge several HTML files into one, which reduces the number of network connections to download the required documents. You can install it using
To merge the
When executing this command, all dependencies
Read more about this tool here .
Let's use HTML ipmport along with other interesting tools discussed earlier .
For those who do not know about these technologies: With templates, the definition of the content of a user element can be declarative. With the Shadow DOM
Combining imports with your own web components will gain modularity and reusability. Anyone can use them by adding only the
Notice that theand for you .
HTML imports are supported by Chrome and Opera browsers. Firefox is currently postponing the addition of this feature, since "they have more priority tasks."
To check this method for compatibility with a specific browser, visit chromestatus.com or caniuse.com . To add the ability of this technology to work in other browsers, use webcomponents.js (formerly platform.js ).
So, we looked at HTML imports. If you want to further delve into this topic, you can look here:
Downloading jQuery UI or Bootstrap libraries requires separate tags for javascript, css, and web fonts. Everything becomes easier when using the Web Components with several dependencies.
HTML imports allow you to download resources as a collection of several files of this type.
I suggest you read the video on this topic.
')
Using HTML imports
To load an HTML file, add the
link tag with import 'in the parameter of rel and href , containing the path to the desired file. For example, if you want to load a file called component.html into index.html , then everything should look like this:index.html <link rel="import" href="component.html" > You can download any resources, including scripts, style sheets and fonts:
component.html <link rel="stylesheet" href="css/style.css"> <script src="js/script.js"></script> doctype , html , head , body optional. HTML imports will automagically load all the specified elements, add them to the page and run JavaScript, if any.Execution procedure
Browsers process content in order. This means that the
script at the beginning of HTML will be loaded earlier than the same, but at the end. Please note that some browsers are waiting for the script to complete before loading the following items.In order to avoid blocking of the remaining HTML with the
script tag, you can use async / defer (you can also move all scripts to the bottom of the page). defer indicates that the code can be run only after loading HTML. async allows the browser to perform these two actions in parallel.So how do imports work?
The script inside the HTML import works like a regular
script tag with the defer attribute. In the example below, index.html will run script1.js and script2.js inside component.html before executing 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. - The
component.htmlloaded fromindex.htmland is awaiting execution; script1.jsintocomponent.html;script2.jsintocomponent.htmlafterscript1.js;script3.jsintoindex.htmlafterscript2.js.
Note that adding the
async attribute to the link[rel="import"] regarded as an async attribute in the script tag . It will not block HTML. This can potentially improve the performance of your project.Beyond what is happening
In fact, HTML imports cannot transfer the entire file from another source. For example, you cannot import into http://example.com/ page http://webcomponents.org/ .
To avoid this limitation, use CORS (Cross Origin Resource Sharing). To learn more about this technology, read this article .
Window and document objects in imported files
Earlier, I mentioned that the imported JavaScript will run on the page. Unfortunately, this can not be said about the imported HTML files. For this to happen with them, you need to add a few scripts.
Beware of the fact that the
document object in the imported file will link to the original page.Using the previously written code as an example, let's make the
document in index.html and component.html reference the document in index.html .Let's make some small changes to our files.
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 }); To get the
document from component.html add your code with document.currentScript.ownerDocument .component.html var mainDoc = document.currentScript.ownerDocument; // mainDoc points to the document under component.html If you use
webcomponents.js , use document._currentScript instead of document.currentScript . The underscore in currentScript used to support browsers that cannot work with this component without using this sign.component.html var mainDoc = document._currentScript.ownerDocument; // mainDoc points to the document under component.html By writing this at the beginning of your script, you can easily access the
document from component.html , even if the browser does not support HTML imports. document._currentScript = document._currentScript || document.currentScript; Performance issues
One of the advantages of using imports is the ability to independently distribute the page load and the processing order of imported objects. But it also means that the HTML code will increase. In general, there are several items to compare:
Dependencies
What to do if several inserted documents refer to the same library? For example:
You load jQuery in both documents, because of which, when importing these documents, the library in the final document will be executed twice.
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> This problem is extremely easy to solve in imports.
Unlike the
script tag, the objects of our article do not reload the same material. Looking at the last example, it is enough to wrap the script HTML HTML tag with import, and this resource will not be loaded twice.But there is another problem: now there are more files for download. What to do if there are not two, but much more?
Fortunately, a tool called “Vulcanize” comes to our rescue.
Network request merging
Vulcanize is a tool to merge several HTML files into one, which reduces the number of network connections to download the required documents. You can install it using
npm and use the command line. There are also analogues for grunt and gulp , with which you can make “Vulcanize” part of your build process.To merge the
index.html files, use the following code: $ vulcanize -o vulcanized.html index.html When executing this command, all dependencies
index.html will be connected in the file vulcanized.html .Read more about this tool here .
Combining Imports with Template, Shadow DOM and Custom Elements
Let's use HTML ipmport along with other interesting tools discussed earlier .
For those who do not know about these technologies: With templates, the definition of the content of a user element can be declarative. With the Shadow DOM
styles , ID and classes element can be used a little differently. With Custom Elements you can create your own HTML tags. Not bad, right?Combining imports with your own web components will gain modularity and reusability. Anyone can use them by adding only the
link tag.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> ... Notice that the
document object in x-component.html is the same as in index.html . There is no need to write anything difficult, everything works on its own Supported browsers
HTML imports are supported by Chrome and Opera browsers. Firefox is currently postponing the addition of this feature, since "they have more priority tasks."
To check this method for compatibility with a specific browser, visit chromestatus.com or caniuse.com . To add the ability of this technology to work in other browsers, use webcomponents.js (formerly platform.js ).
Resources
So, we looked at HTML imports. If you want to further delve into this topic, you can look here:
Source: https://habr.com/ru/post/241135/
All Articles