Polymer 3 - Is there a way to extract the html template into a separate html file?

Question

I am trying to extract the HTML template from my Polymer component into a standalone HTML file. For Polymer 2 i found some examples, but they don't work for my Polymer 3 project. I tried something like the following, but it fails.

import * as template from './pm.template.html';
...
static get template() {
    return template;
}

So as simple question, it is possible to separate the template as HTML file (not a JS file) & if yes, how?

I know, there was a similar question from last Oct ('17), but there was only a way through webpack, but this is not a simple solution in m mind. I hope someone know a better way, or knows something from an upcoming feature.

(Same question inside the polymer google group: google groups polymer )

Answer 1

Very unfortunately, there is no direct way.

While Polymer 2 was all about "use the platform", and running an app without building/bundling was totally feasible, this is not supported anymore since Polymer 3 (though you may find an unsupported setup that works for your case). Hence, I recommend using any bundler of your choice.

That said, you might be able to mitigate your reasons for separating out your templates from your components. Multiple plugins for Visual Studio Code exist for formatting HTML in tagged template literals, or open the contents in another tab for editing:

• https://github.com/mjbvz/vscode-lit-html (inline)
• https://github.com/plievone/vscode-template-literal-editor (separate Tab)

If you want to give bundling a try, you have multiple options:

• There is the official PWA starter kit, based on polymer-cli (which also advertises LitElement).
• This polymer-3-webpack-starter-kit is a good alternative, especially when using Polymer 3 with legacy elements (as opposed to the new Lit/Redux combo), and just so happens to be configured to support your exact use-case, out of the box.