Is there a way to use es6 modules to import html template into javascript? [duplicate]
Asked Answered
O

0

30

There seems to be many dated questions on this topic, I cant find one more recent (2018). Also other questions just focus on getting this to work, I am focused on the right path forward for making this work following the path of ES6 Modules with regards to HTML Imports.

All the browsers seem to agree that html import is dead

 <link rel="import" href="https://xyz.html">

If this is true, is there a good way to import an html

<template>

for use in JavaScript?

I found this trick here - Create and Use a Custom HTML Component? , but it relies on the HTML being in the JavaScript file as a string.

In my perfect world, I could define an HTML file template.html (so I get nice editor color coding), but be able to import that for use in my dom.

I know there are libraries like lit-html that make this easy, but it seems since ES6 modules are standard now, and since html imports were deprecated in lieu of ES6 modules, that there should be some simple native way to do this?

Odontoid answered 8/11, 2018 at 19:16 Comment(10)
I didn't even know HTML imports was there in the first place...Crossway
you could just use lit-html, afaik some editors like atom or vs code already have built in options for syntax highlighting of html/css in js template literalsDisadvantageous
yes, as I noted in my question I know I can use lit-html or other things, but the point of web-components is to NOT to have to use a library or framework to make them work, html imports worked fine for this without a library, and it seems like ES6 Modules should do the same, seems like tons of conversation on this years ago, then nothing....Odontoid
Also thanks for the extension suggestion, I found - ES6 String HTML - marketplace.visualstudio.com/…, it works great.Odontoid
Well, with that extension even if you use vanilla web components you should be able to write your markup in a separate js and just import it somewhere elseDisadvantageous
Its kind of similar, but different angle, mine is really about ES Modules and how they will allow for this, or if they do, or what the plan is, I found this link - github.com/w3c/webcomponents/issues/645#issuecomment-343601237 Of a strawman on it, maybe someone knows the latest status.Odontoid
@Odontoid the second link is exactly the same question. For your question in comments: there's still no consensus on it so it won't be implemented as a standard in a near future (1-2 years)Pumpkin
@Supersharp, thanks, you are right, I was lazy and just read the first one, we can close this one.Odontoid
It's been a couple years. Any update on this? ES modules for importing html into html?Dardanelles
HTML modules probably are the answer, but still not available: chromestatus.com/feature/4854408103854080Octavia

© 2022 - 2024 — McMap. All rights reserved.