CODEWITHSUNDEEP
javascripthtmlpolymeres6-modulespolymer-3.x
Nima Tahmasebi
Nima Tahmasebi

Reputation: 141

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?

Upvotes: 8

Views: 2761

Answers (3)

Erik Martino
Erik Martino

Reputation: 4225

Try

import { PolymerElement, html } from '@polymer/polymer';
import template from '/m-chip.html';

...

static get template() { 
    return html([template]);
}

and just plain html in the template html file, that works for me.

Upvotes: 0

cicciosgamino
cicciosgamino

Reputation: 964

Actually for html where you don't need the reference adjusting, i export the html code as a string through the js module export default : 

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

And in the polymer element i import the ES6 module eg:

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

It's not the best solution, but for the moment to made some tests with Polymer3 and templating structuring is not so bad !

Upvotes: 2

Yuri
Yuri

Reputation: 149

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.

Upvotes: 3

Related Questions