Import a template from a separate html file into polymer 3

Question

Instead return "HTML CONTENT";I have a separate html file and I want to import it into my js file in order to return its contents, but it import template from '/m-chip.html";does not work.

element.js

import {Element as PolymerElement} from '../node_modules/@polymer/polymer/polymer-element.js';
import template from '/m-chip.html';
export class Mchip extends PolymerElement{
    static get template() {
        return template;
    } 
    constructor() {
        super();
    }
} 
customElements.define("m-chip" ,Mchip)

t-chip.html

<style>
...
</style>

<div>...</div>

How can I achieve this without jquery and plain js?

Answer 1

Importing html files well is not something that javascript will understand at the moment. However, you can create your project using webpack and add html-loader https://github.com/webpack-contrib/html-loader which tells how to handle your html import inside javascript.

Answer 2

html, , html js :

// exports a constant 
export default `
  <style>
    ...
  </style>
  <div>
    ...
  </div> `

ES6, :

import template from '../templates/template.js'
...
static get template() {
  return template;
}

, Polymer3 !