Coexistence with Polymer 2 components?

[vlaraort]

Hi!

There is a way to use polymer 2 components inside a LitElement?

Before yesterday, using the importHref function from polymer 3, I used to be able to load html webcomponents, and load them inside the render() with a tag, but now, with this commit,
https://github.com/Polymer/polymer/commit/fd416a212ed725eef26d3b29bb624ed66669ad76
I am not able anymore to do that.

I have a scenario where I can't migrate polymer 2 components, but I have to use them, so I wonder if its possible to use polymer 2 components (html files) inside a litElement

[TimvdLippe]

You definitely can, as Polymer 2/3 elements and LitElement are all based on webcomponents. For example, this JSBin (http://jsbin.com/pokuwururi/edit?html,output) works in Firefox 60 and Chrome using both a Polymer 2 element as well as the LitElement example. (network could be a bit slow, just because it does a lot of network requests)

However, you are then responsible for doing the integration yourself, meaning you have to take care of the HTML imports and ES modules orchestration. Therefore, we advise you to use Polymer 3 and LitElement together, as they are both based on the same loading mechanism ES modules.

[LarsDenBakker]

@TimvdLippe That's an interesting snippet, thanks for posting that!

The only issue with this I can think of here is duplicate element definitions. For instance both Polymer 2 and 3 will try to register dom-if, dom-repeat etc. right?

[TimvdLippe]

You are correct. You can nor have both Polymer 2 and Polymer 3 version of the same element on one page. But you can mix them with LitElement as you like.

…

On Thu, 10 May 2018, 16:08 Lars den Bakker, ***@***.***> wrote: @TimvdLippe <https://github.com/TimvdLippe> That's an interesting snippet, thanks for posting that! The only issue with this I can think of here is duplicate element definitions. For instance both Polymer 2 and 3 will try to register dom-if, dom-repeat etc. right? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#48 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFrDb29OsuLP4TTGwEoOJj9uU7hrut_zks5txEnegaJpZM4T5iEj> .

[vlaraort]

Yes, @TimvdLippe is right, but I still have a problem. This snippet works great but is still a html file, previously in a JS file, I could do this:

    import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element@latest/lit-element.js?module';
    import { importHref } from '@polymer/polymer/lib/utils/import-href';

importHref( 'https://polygit.org/polymer+:2.x/paper-checkbox+polymerelements+:master/components/paper-checkbox/paper-checkbox.html', null, null, true);
    class MyElement extends LitElement {

      static get properties() { return { mood: String }}

      _render({mood}) {
        return html`<style> .mood { color: green; } </style>
          Web Components are <span class="mood">${mood}</span>!
          <paper-checkbox></paper-checkbox>`;
      }
    }

    customElements.define('my-element', MyElement);

But now this function is removed, is there a clean solution? or should I replicate the previous importHref polymer function?

[TimvdLippe]

You have to replicate the behavior. We do not support HTML imports in Polymer 3.

…

On Fri, 11 May 2018, 10:08 vlaraort, ***@***.***> wrote: Yes, @TimvdLippe <https://github.com/TimvdLippe> is right, but I still have a problem. This snippet works great but is still a html file, previously in a JS file, I could do this: ` import {LitElement, html} from ' ***@***.******@***.***/lit-element.js?module'; import { importHref } from ***@***.***/polymer/lib/utils/import-href'; importHref( ' https://polygit.org/polymer+:2.x/paper-checkbox+polymerelements+:master/components/paper-checkbox/paper-checkbox.html', null, null, true); class MyElement extends LitElement { static get properties() { return { mood: String }} _render({mood}) { return html`<style> .mood { color: green; } </style> Web Components are <span class="mood">${mood}</span>! <paper-checkbox></paper-checkbox>`; } } customElements.define('my-element', MyElement); ` But now this function is removed, is there a clean solution? or should I replicate the previous importHref polymer function? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#48 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFrDb_2UYSC7yKSMuSQR1LfVwejyNBK2ks5txUbzgaJpZM4T5iEj> .

[vlaraort]

ok, thanks!