Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Meghan (she/her)
Meghan (she/her)

Posted on

     

The downfall of HTML Imports is upon us (to me)

[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 theperfect delivery method for CSS/JS libraries, frameworks, and of course, Custom Elements.

I first noticed the beginning of the end when I saw this:

GitHub logo 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:

<scripttype="module"url="foo.html">
Enter fullscreen modeExit fullscreen mode

or #"foo.html";

Enter fullscreen modeExit fullscreen mode

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 itreplacing the HTML way.

Ilove 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 ofFluent Design inspired elements.

And the whole project can be used in one line.

<linkrel="import"href="https://rawgit.com/Nektro/custom-elements/master/fl/fl.html">
Enter fullscreen modeExit fullscreen mode

That one file sets some basic CSS, and imports all the other elements. However, Chrome is the only browser that hasnative 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.

Top comments(2)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
snuggs profile image
Ahmid-RA
committing code
  • Location
    On the Blockchain
  • Pronouns
    IT
  • Joined

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

CollapseExpand
 
nektro profile image
Meghan (she/her)
24. Local trans witch who prefers to do magic with a keyboard. she/her. Currently hacking away at making the Web less centralized.
  • Email
  • Location
    Massachusetts, USA
  • Education
    B.S. CS @ UMass Dartmouth
  • Work
    unicycle.co
  • Joined

If you'd like to visit the project I mentioned above you cando so here :D It's a WIP but I work on it all the time and use it in my own projects

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Meghan (she/her)
24. Local trans witch who prefers to do magic with a keyboard. she/her. Currently hacking away at making the Web less centralized.
  • Location
    Massachusetts, USA
  • Education
    B.S. CS @ UMass Dartmouth
  • Work
    unicycle.co
  • Joined

More fromMeghan (she/her)

Why do Web browsers famously use so much RAM?
#discuss#javascript
I made a JS Module so you can *almost* use the pipeline operator today!
#showdev#javascript#polyfill#esnext
Have blocks return the last statement with the Comma Operator
#javascript#webdev
DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp