[Deprecation] Styling master document from stylesheets defined in HTML Imports is deprecated, and is planned to be removed in M65, around March 2018.
I just read this in my console today after my Chrome browser just updated to M61. And it's the saddest news all I've read all day. The next step in the downfall of HTML Imports. And I can't believe it's happening because it is the perfect delivery method for CSS/JS libraries, frameworks, and of course, Custom Elements.
I first noticed the beginning of the end when I saw this:
HTML Modules
#645
Now that JavaScript modules are on the verge of widespread browser support, we should think about an HTML module system that plays well with it. HTML Imports doesn't have a mechanism for exporting symbols, nor can they be imported by JavaScript, however its loading behavior is quite compatible with JavaScript modules.
@dglazkov sketched out a proposal for HTML modules here: https://github.com/dglazkov/webcomponents/blob/html-modules/proposals/HTML-Imports-and-ES-Modules.md
The main points are that, using the JavaScript modules plumbing, you can import HTML.
Either in HTML:
<script type="module" url="foo.html">
or JavaScript:
import * as foo from "foo.html";
But within the scope of that sketch there are still several questions about the specifics of exporting symbols from HTML and importing to JavaScript.
It's a proposal to make an amendment to HTML Imports to add the functionality through Javascript instead of through <link rel="import">. While I'm not totally against the idea of being able to import <template> elements and such inside JS, I hate the idea of it replacing the HTML way.
I love the idea of Custom Elements and it's honestly my favorite feature I've seen added since I started web dev. I have a repository dedicated to custom elements where I make a bunch. The most notable section of which is a folder with a bunch of Fluent Design inspired elements.
And the whole project can be used in one line.
<link rel="import" href="https://rawgit.com/Nektro/custom-elements/master/fl/fl.html">
That one file sets some basic CSS, and imports all the other elements. However, Chrome is the only browser that has native support. Everyone else has to use a bodged polyfill because every other browser isn't even interested in implementing it for some reason.
In the end, I hope this HTML based feature stays supported in HTML.
Oldest comments (2)
If you'd like to visit the project I mentioned above you can do so here :D It's a WIP but I work on it all the time and use it in my own projects
Great writeup! If you love custom elements i'm really excited for your opinion on my new project. Requires no node, no webpack, no babel, no bower, no dependencies. Just a
<script>tag.github.com/devpunks/snuggsi