Use Polymer 2.0 component in Polymer 3.0 app

Question

Currently I migrate a Polymer 2.0 app to Polymer 3.0. But at the moment understandably a lot of components are still not migrated, yet (like e.g vaadin-gid as one example).

How can I use these Polymer 2 components in my migrated Polymer 3 app?

Vaadin components (at least grid, see vaadin.com/components/vaadin-grid) do have "converted Polymer 3 compatible version" available. So bad example, but I think the topic itself is intresting... — ain
I write a example in: github.com/herberthobregon/polymer2-3 It works but the polymer team has not answered me if the implementation is correct, but works — HerberthObregon
Thanks for the hint, I wasn't aware of the of the "converted Components". That will help me at least for the Vaadin-Components — Marc
isn't this the purpose of the modulizer, as described here: stackoverflow.com/q/50445580/521598 ? — mishu
@mishu: Yes, you are right, that's the purpose of the modulizer. In fact I have used it to migrate all my components. But I'm looking for a solution I do not have to migrate all the third-party componen, too — Marc

HerberthObregon HerberthObregon · Accepted Answer · 2018-05-23T00:33:48

basicly add this code in <head> and delete /bower_components/polymer folder

<script type="module">
        import {PolymerElement} from '@polymer/polymer/polymer-element.js';

        window.Polymer = {
            Element: PolymerElement
        };

        window.loadElement = function(filename) {
            var l = document.createElement('link');
            l.rel = 'import';
            l.href = filename
            var h = document.getElementsByTagName('head')[0];
            h.parentNode.insertBefore(l, h);
        }
        // Load de main element
        loadElement('/main-poly2.html');
</script>

load polymer 3 elements in polymer 2

<script type="module">
        import './poly3-element'

        class MainPoly2 extends Polymer.Element {
            ...
        }
</script>

load polymer 2 elements in polymer 3

import {PolymerElement, html} from '/node_modules/@polymer/polymer/polymer-element.js';
loadElement('/poly2-element.html');

class Poly3Element extends PolymerElement {
    ....
}

I write a example in:

https://github.com/herberthobregon/polymer2-3

It works but the polymer team has not answered me if the implementation is correct, but works

Use Polymer 2.0 component in Polymer 3.0 app

2 Answers