As of 2020, HTML imports have been dropped, and there is no clear replacement solution. While you can use polyfills to use existing WebComponents that use them (like the ones from section 4.2.1 - the component that displays animated GIFs, or the voice component), we propose some ways to import WebComponents using JavaScript in the next part of this chapter.
HTML imports have been implemented so far only by Google Chrome. But Google announced that this feature is obsolete since Chrome 73. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it!
The reason other browser vendors did not agree to implement them is the merge of ES6 imports and modules. Mozilla, for example, does not want to re-implement something that existed for its main features, covered by ES6 modules (read this discussion about HTML imports).
When we created this course, Web Components were a hot topic and imports were the only way to reuse external components. Many websites still use them, such as YouTube. And Google itself is struggling to replace them, as there is no easy way today to do something 100% equivalent to what HTML imports does today.
There is also an interesting discussion on the Chromium-dev mailing list about how HTML imports should be replaced, and about what you can do today to keep your applications working (you will note that I'm part of this discussion too ;-) ).
So... is there a replacement for HTML imports today? The answer is clearly NO. But there are ways to still use HTML imports or to use a more complicated "JavaScript bundler". Also, the people at W3C working on Web Components talk a lot about a future "HTML module" that would do something similar to HTML imports, but this is not even in a specification yet...
Here is where we are:
RECOMMENDED: There is a polyfill for HTML imports that works very well. Just include it and your code that use HTML imports will work out of the box on recent browsers (see ref.). We use it on our own applications and it works 100% with cascading imports, imports created dynamically, etc. Very solid.
RECOMMENDED: The above polyfill is also integrated in the "Web Component polyfill" that will also emulate other Web Components features (see webcomponentsjs). It is the one used in the course's examples. This "global" polyfill has been made to make apps that use Web Components cross-browser compatible. If you have old Web Components code that use the version 0 of the APIs, you can use its v0 branch and your old code will work on modern browsers . There are also other alternative polyfills for each feature, like AshleyScirra’s but we haven't tried these...
WORKS BUT REQUIRES EXTRA WORK: You can bundle the code of your Web Components into a single JavaScript file, using bundlers like webpack or parcel, then use JavaScript modules (<script type="module" src=...>). This is what the Polymer 3 Web Component framework dev team did when they had to remove HTML imports.
MAYBE A FUTURE STANDARD WAY? There is a lot of debate in W3C about future "HTML modules" that would do something close to HTML imports, but while this topic has been under discussion since 2017, it's still not even in a specification. See the discussion.
HTML Imports is the simplest API from Web components :-)
Add a <link rel="import" href="your_html_file"> and all the html/css/js code, that defines a Web component you plan to use, will be imported:
It is similar to including CSS in your page!
Package your components into an HTML page (can include CSS, JS, etc) and import it!
It is as simple as:
<head>
<link rel="import" href="components/myComponents.html">
</head>
<body>
<my-widget>
<span slot="my-title">Title injected</span>
<span slot="my-paragraph">Paragraph injected</span>
</my-widget>
</body>
Look at line 2: this is where the importation of the HTML, CSS and JS code of new "components" is done. The HTML+JS+CSS code that defines templates, attachment to a shadow host, CSS, and registering of new custom HTML elements is located in myComponents.html.
You could create a my-widget.html file, add the HTML template and the JavaScript code to that file, and import my-widget.html into your document and use <my-widget>...</my-widget> from the last lesson directly!
MDN's documentation: HTML Imports