Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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?

like image 316
Bob Avatar asked May 20 '16 11:05

Bob


People also ask

What replaces HTML Imports?

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.

Is web components dead?

We can avoid them using libraries like Lit, Stencil, or Catalyst. The realization that all modern frontend frameworks and many big companies count on Web Components clearly shows that Web Components are not dead.

What are html imports?

HTML Imports, part of the Web Components cast, is a way to include HTML documents in other HTML documents. You're not limited to markup either. An import can also include CSS, JavaScript, or anything else an . html file can contain. In other words, this makes imports a fantastic tool for loading related HTML/CSS/JS.

Why webcomponents?

Web components are a set of web technologies that allow us to create reusable HTML elements. They make it possible to develop framework-agnostic, custom components that use the HTML syntax. Browsers can natively interpret them without a third-party library such as React or Vue. js.


1 Answers

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.

like image 143
Supersharp Avatar answered Nov 14 '22 02:11

Supersharp