Import Polymer 2 components in Polymer 3

Question

I am developing a web component using Polymer v3, and need to include some custom elements defined in legacy Polymer 2 components in the template HTML of my new component.

Since HTML imports are no longer supported in Polymer 3, what approach should I take to include them? If I was using Polymer 2 I could just add the following in my component's HTML file:

<link rel="import" href="../my-legacy-component.html">

I have tried adding the above link into the template HTML of my component, but it appears that doesn't work. I have also tried various import commands to reference the JS files inside the legacy component directly, but received various inscrutable JS errors so I'm not sure if that is the correct way to go either.

I can't believe there isn't a simple way to do this - would the Polymer team really introduce a new version of the library that is completely incompatible with all the components created using older versions?

Answer 1

Did you try to use polymer-modulizer? Modulizer performs many different upgrade tasks, like:

• Detects which .html files are used as HTML Imports and moves them to .js
• Rewrites in HTML to import in JS.
• Removes "module wrappers" - IIFEs that scopes your code.
• Converts bower.json to package.json, using the corresponding packages on npm.
• Converts "namespace references" to the proper JS module import, ie: Polymer.Async.timeOut to timeOut as imported from @polymer/polymer/lib/util/async.
• Creates exports for values assigned to namespace referencs. ie, Foo.bar = {...} becomes export const bar = {...}
• Rewrites namespace objects - an object with many members intended to be used as a module-like object, to JS modules.
• Moves Polymer element templates from HTML into a JS template string.
• Removes s if they only contained a template.
• Moves other generic HTML in the document into a JS string and creates it when the module runs.

more on github