Combining polymer 1.0 with 3.0

2019-06-06 10:17发布

问题:

I am working on modifying an existing project which is built in polymer 1.0.

As the current version of polymer is polymer 3.0 how can we include the same without making much changes with the existing application.

The main difference than i found out is that in polymer 1.0 .html files are imported whereas in polymer 3.0 .js files are imported.

Added below the comparison between two imports

polymer 1

<head>
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
</head>

polymer 3

import {PolymerElement, html} from '@polymer/polymer';

When we try to install components js files are being created. Is there any method to create old type polymer components via CLI?

回答1:

I don't think you should try to create Polymer 3 elements in HTML files, as HTML imports are either not supported (in FF, for example), or about to become obsolete (in Chrome, for example), as you can see here.

A mix between components crated with Polymer 1.x/2.x (with HTML imports) and Polymer 3.x and/or LitElement would be to have an webpack build step, that would bundle all the JS files. (for example have a single JS file where you import your new elements, pass it throgh webpack and include it in your Polymer 1.x app).

But in the long run migrating away from HTML imports seems like the safer bet. You might want to take a look at the modulizer, as @HakanC suggested.