If HTML Imports are dead/deprecated what's the best way to import your web component (X-Tag) template?

html templates web-component x-tag html-imports
Bob picture Bob · May 20, 2016 · Viewed 7k times · Source

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?

Answer

Supersharp picture Supersharp · May 20, 2016

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.

Related questions

How can I echo HTML in PHP?

I want to conditionally output HTML to generate a page, so what's the easiest way to echo multiline snippets of HTML in PHP 4+? Would I need to use a template framework like Smarty? echo '<html>', "\n"; // …

Read More
Opening new window in HTML for target="_blank"

<a href="facebook.com/sharer" target="_blank" >Share this</a> How do I make this a certain width and height, in a new window, when the user clicks on it? In firefox, the current code only …

Read More
angularjs make a simple countdown

I would like make a countDown with Angular js. this is my code: Html File <div ng-app ng-controller = "countController"> {{countDown}} <div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ js File function countController($scope){ $scope.countDown = 10; var timer = setInterval(function(){$scope.countDown--; console.log($…

Read More