Correct way to use Polymer 2 elements in Polymer 3 element?

Question

How can I use Polymer 2 elements in Polymer 3 element? The following doesn't work since <link> element doesn't work inside shadow dom.

static get template() {
    return '
        <link rel="import" href="...">
        <my-element></my-element>';
}

We can simply take out <link> outside of the element and put at the top level, but that feels like breaking component-ness.

Syncretism

I think it's impossible to combine elements of Polymer 2 with Polymer 3 – Chaudoin

Answer 1

You can't load two version of Polymer (Polymer 2/1 and Polymer 3) because Polymer register some custom-elements to the api of webcomponents and when you try to load a component from Polymer 2 and another of Polymer 3 it tells you that you can't register x custom-element again.

But you can use LitElement and a component from Polymer 2/1, you just have to use html-import-js inside your LitElement component.

Detroit

Answer 2

You can convert a Polymer 2 component into a Polymer 3 component using this tool: https://github.com/Polymer/tools/tree/master/packages/modulizer

Selves

Answer 3

you seems to be looking for shared styles. Since polymer provides shadow DOM., scope is limited to component DOM. Better refer shared styles here... click here and give ctrl+f., search for Share styles between elements

Scot