A brief introduction to file import in HTML5

This article mainly introduces a brief introduction to file import in HTML, including loading jQuery, execution order after import, etc. Friends who need it can refer to it

Template, Shadow DOM and Custom Elements make it easier for you to create UI components than before. However, resources like HTML, CSS, and JavaScript still need to be loaded one by one, which is very inefficient.

It is not easy to delete duplicate dependencies. For example, now loading jQuery UI or Bootstrap requires adding separate tags for JavaScript, CSS, and Web Fonts. If your web components apply multiple dependencies, things become more complicated.

HTML Import lets you load these resources in a merged HTML file.

Import using HTML

To load an HTML file, you need to add a link tag, whose rel attribute is import, and herf attribute is the path to the HTML file. For example, if you want to load component.html into index.html:

index.html