Search code examples
javascripthtmlpolymeres6-modulespolymer-3.x

Import template from separate html file in polymer 3

Instead of return "HTML CONTENT"; I have a separate html file and I want to import it to my js file to return the content of it but 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)

m-chip.html

<style>
...
</style>

<div>...</div>

How can I achieve this without jquery and plain js?

Solution

  • Well importing html files is not something that javascript will understand at the moment. However you can build your project with webpack and add html-loader https://github.com/webpack-contrib/html-loader that specify how to treat your html import inside javascript.