Search code examples
es6-moduleshtml-importspolymer-3.x

Polymer - How to slowly migrate from HTML imports to ES6 modules?

As said in the Polymer-Summit 2017, web-components, in Polymer 3.0, won't be imported using HTML-imports but ES6-modules.

So I am looking for a way to change all my HTML-imports one by one into ES6-module's import without making unstable code.

For exemple:
Here's a little simple project.
Their are 3 files: 

|-index.html
|-custom-element.html
|-MyModule.html

The index.html imports the custom-elementcomponent and instantiate one in the DOM.
The custom-element.html imports MyModule.html, and use its function square(number).
All imports are made using HTML-imports.
I am trying to figure out how to make just MyModule an ES6-module and then import it in the custom-element.html file without breaking the app.

Solution

  • Change the script tag's type into <script type="module">.

    Import the ES6 module from inside the script module.

    Here's the plunker with the full solution.