Coexistence with Polymer 2 components? about lit-element HOT 6 CLOSED

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.

from lit-element.

@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?

from lit-element.

from lit-element.

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?

from lit-element.

from lit-element.

ok, thanks!

from lit-element.