javascript - Import template from separate html file in polymer 3 - Stack Overflow

admin管理员组

文章数量:1389758

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?

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?

• javascript
• html
• polymer
• es6-modules
• polymer-3.x

Share Improve this question Follow edited Sep 25, 2017 at 22:05 tony19 139k2323 gold badges277277 silver badges347347 bronze badges asked Sep 24, 2017 at 17:58 Nima TahmasebiNima Tahmasebi 14122 silver badges1313 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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./webpack-contrib/html-loader that specify how to treat your html import inside javascript.

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 !

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.

本文标签： javascriptImport template from separate html file in polymer 3Stack Overflow