Can we use template syntax in Polymer like in Vue?

There is single file component concept in Vue, where 'template' is plain HTML with custom directives and other features (there is not the jsx or string like: template:`<div>Content</div>` Can we use something like this in Polymer 3?

    <template>
      <div>Content</div>
    </template>

Solution

Yes, there is. It's all written in a js file normally named as component-name.js. In the below case, I will name my js file as say-hello.js

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

class SayHello extends PolymerElement {
   static get template() {
     return html`
        //add html contents inside here
        <style>
          .customClass {
            font-size: 16px;
          }
        </style>
        <div class="customClass">
          Hello {{name}},
        </div>
        <template is="dom-repeat" items="{{links}}">
           <input type="button" id="{{item.id}" value="{{item.name}}" on-click="doAlert"/>
        </template>

     `
   }

   static get properties() {
     return {
        name: {
          type: String,
          value: null,
        },
        links: {
          type: Array,
          value: [
            {id: 'home', name: 'Home'},
            {id: 'profile', name: 'Profile'},
            {id: 'about', name: 'About'}
          ]
        }
     }
   }

   doAlter(e){
      alert(e.target.id)
   }

   ready() {
    super.ready();
    this.push("links", {
        id: 'settings'
        name: 'Settings'
      });
  }
}
window.customElements.define("say-hello", SayHello);

As you have noticed above, there is no data object in polymer, everything is under properties. You can use properties to pass data into the component and also the internal data of the component will also be stored in the properties. because of this, any mutations of data will get passed to the parent component as well. You don't have to keep a watch and emit back the data to the parent. Instead, it works out of the box as expected.

Event Bindings are made with on-click, instead of @click in vue

v-for is done using dom-repeat template. The elements in an array are called item in each iteration. In order to bind elements inside an item with props you need to use curly brackets wherein vue you use a semicolon.

Instead of mounted callback in vue, there is the callback called ready()

You cant push an element directly to an array, instead, you need to use theirs on array mutation methods.

I have been using polymer 1 and 3 for some time and stopped it all altogether. It doesn't look much promising.