29

I'm working on my first X-Tag application and on it's page it says it's meant to work with Web Component API's such as 'Custom Elements, Shadow DOM, Templates, and HTML Imports'.

I've started working on my templates, but what's the best option to import them, now that HTML Imports have been deprecated?

Supersharp
  • 29,002
  • 9
  • 92
  • 134
Bob
  • 411
  • 1
  • 6
  • 12
  • what browser would you target? – Supersharp May 20 '16 at 13:40
  • Latest versions of Chrome and Firefox. – Bob May 20 '16 at 13:42
  • 2
    See HTML Modules https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/master/HTMLModules/explainer.md and https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/ewfRSdqcOd8/w_Fr6rJ3DQAJ and https://github.com/w3c/webcomponents/blob/gh-pages/proposals/html-module-spec-changes.md and background discussion at https://github.com/w3c/webcomponents/issues/645 and some issue discussion at https://github.com/w3c/webcomponents/issues/783 – sideshowbarker Feb 23 '19 at 00:15

1 Answers1

5

2019 Update

Native implementation of HTML Imports will be removed from Chrome 73 so it is now recommended to use native fetch(), or third-party libraries.

Obsolete answer

AFAIK, HTML Imports have not been deprecated (or is it new?). It's only Mozilla who said it won't implement it for Firefox. But the polyfill is still available, and supported.

Since ES6 Modules are not implemented yet, I would say HTML Imports are still the best option (it's the one I chose) as they are very easy to use and work well (Polymer uses them extensively).

Instead you can try RequireJs or implement your own module loader (with XMLHttpRequest).

I don't recommend you to use a ES6 Module Loader polyfill as they are only at experimental stage.

Supersharp
  • 29,002
  • 9
  • 92
  • 134
  • Mozilla are on record as saying they don’t intend to ever implement HTML Imports a currently specced, and Apple have said that if they ever implement anything for declarative HTML imports it won’t be until after ES6 modules are deployed and we have some experience from that to draw on. More some of the discussion, see https://www.w3.org/2015/10/26-webapps-minutes.html#item06 – sideshowbarker May 24 '16 at 08:23
  • 1
    HTML imports are actually dead yet. Mozilla [won't implement](https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports) them as already noted and Chrome also [deprecated](https://www.chromestatus.com/feature/5144752345317376) them and will remove the feature in the next version (73). – jowey Feb 22 '19 at 11:29
  • 4
    Could you please provide an example on how to replace html imports? – Stefan Feb 26 '19 at 17:01
  • @Stefan look this post: https://stackoverflow.com/questions/55080103/how-to-separate-web-components-to-individual-files-and-load-them/55081177#55081177 – Supersharp Mar 10 '20 at 14:32
  • 1
    or this minimalist example with await/async: https://stackoverflow.com/a/58136110/4600982 or https://stackoverflow.com/a/56998095/4600982 – Supersharp Mar 10 '20 at 14:33
  • 1
    You really need to update this or it could give misleading information to beginners. Thx. – Jinghui Niu Apr 10 '20 at 04:49
  • oct-2020 html import is not working on chrome(latest version) – Muhammad Saquib Shaikh Nov 16 '20 at 15:11
  • 2
    Web developers asked for years how to handle HTML more fluidly in a modern context, and browser vendors ultimately told us, without a hint of irony, "use JavaScript". We truly live in a fallen world. – Isabelle Wedin Mar 07 '22 at 20:08