Working WebPack Polymer 3 Example?

1

Has anyone seen a working example with WebPack and Polymer 3?
Any hint would be great!

1 Like
2

@eiswind can you help clarify what the issue is/are that you cannot set it up together?

3

I’m just getting started. As far as I can see my main problem is the following:

  • Polymer 3 has no html that I can load in index.ejs.
    I guess I should load some polymer-element js, but I just stupidly fail at that.
4

As far as I know, polymer 3 no longer employs html import, everything is a JS class, with static property for template. So I guess you just need to do something like this:

import { SomePolymerElement } from 'some-where';

customElements.define('some-tag-name', SomePolymerElement);

Can you try that?

Edit:
From their official example:

import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';

// Define the element's API using an ES2015 class
class XCustom extends PolymerElement {

  // Define optional shadow DOM template
  static get template() { 
    return html`
      <style>
        /* CSS rules for your element */
      </style>

        <!-- shadow DOM for your element -->

      <div>[[greeting]]</div> <!-- data bindings in shadow DOM -->
    `;
  }

  // Declare properties for the element's public API
  static get properties() {
    return {
      greeting: {
        type: String
      }
    }
  }

  constructor() {
    super();
    this.greeting = 'Hello!';
  }

  // Add methods to the element's public API
  greetMe() {
    console.log(this.greeting);
  }

}

// Register the x-custom element with the browser
customElements.define('x-custom', XCustom);
5

Thx. It’s even easier than that. I was thinking to complicated. Just importing the component module did the trick. Had to remove the polymer plugin.

import ‘@vaadin/vaadin-grid/vaadin-grid’;

viola.

1 Like