Code formatting for html in polymer elements

Is there a way to make intelliJ format the HTML code inside a polymer 3 component?

Excerpt if the sourcecode:

export class RestaurantSelector extends PolymerElement {
static get template() {
// language=HTML
return html`
<style>
:host{
display: inline-block;
}
</style>
<header>
<h4>Restaurant</h4>
<template is="dom-if" if="[[restaurants.length==1]]">
<div id="selectedName">
[[selected.name]]
</div>
</template>
<template is="dom-if" if="[[restaurants.length>1]]">
<paper-dropdown-menu label="Dinosaurs">
<paper-listbox slot="dropdown-content" selected="1">
<paper-item>allosaurus</paper-item>
<paper-item>brontosaurus</paper-item>
<paper-item>carcharodontosaurus</paper-item>
<paper-item>diplodocus</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</template>
</header>
<!-- End shadow tree -->
`;
}

The html-sourcecode is recognized as html and highlighted correctly, but I can't autoformat the HTML. Is there a way to do that without splitting the html in it's own file?

8 comments

When implementing formatting inside strings, our intention was to avoid changing the runtime behavior of code, so formatting is disabled unless the string is marked as 'safe' to reformat with a comment (//language=HTML) - see https://www.jetbrains.com/help/webstorm/using-language-injections.html#injection_comments.

As you do have a comment, formatting (via Code | Reformat Code) should work (and it does work for me):

export class RestaurantSelector extends PolymerElement {
static get template() {
// language=HTML
return html`
<style>
:host {
display: inline-block;
}
</style>
<header>
<h4>Restaurant</h4>
<template is="dom-if" if="[[restaurants.length==1]]">
<div id="selectedName">
[[selected.name]]
</div>
</template>
<template is="dom-if" if="[[restaurants.length>1]]">
<paper-dropdown-menu label="Dinosaurs">
<paper-listbox slot="dropdown-content" selected="1">
<paper-item>allosaurus</paper-item>
<paper-item>brontosaurus</paper-item>
<paper-item>carcharodontosaurus</paper-item>
<paper-item>diplodocus</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</template>
</header>
<!-- End shadow tree -->
`;
}
}

We have been requested and are planning to invert the default in a future version - reformat unless specifically excluded. See https://youtrack.jetbrains.com/issue/WEB-30883

0

Thank you! It seems to work sometimes.

First I thought it would work after I reopened the file, but that wasn't reliably the case.

I have added the div with the span to the existing template, which is as you can see marked with html, but it's not reformatting the code

0

works fine for me - code is formatted to

// language=HTML
return html`
<div>
<span></span>
</div>

`;


0

please provide a .js file that can be used to recreate the issue

0

I'm not sure if the formatting works without the whole project

import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/paper-item/paper-icon-item.js';
import './restaurant-selector.js'
import {SharedStylesPolymer} from '../../components/shared-styles.js';
import {connect} from "pwa-helpers/connect-mixin";
import {store} from "../../store";
import {navigate} from "../../actions/app";
// lazy load the restaurants reducers
import restaurants from '../../reducers/restaurants.js';

store.addReducers({
restaurants
});

class RestaurantsPage extends connect(store)(PolymerElement) {
static get template() {
// language=HTML
return html`
<div>
<span></span>
</div>
${SharedStylesPolymer}
<style>
.container{
display: flex;
flex-direction: row;
}
.sidebar{
height: 100%;
background-color: var(--app-section-even-color);
margin-right: 2em;
}
.actions paper-item{
margin-left: 1em;
}
.body{

}
</style>
<div class="container">
<div class="sidebar">
<restaurant-selector></restaurant-selector>
<template is="dom-if" if="[[selected!=null]]">
<div class="actions">
<paper-item>Stammdaten</paper-item>
<paper-item on-click="_navigateSub" data-sub="masterdata" >Mittagstisch</paper-item>
<paper-item >Speisekarte</paper-item>
<paper-item >Soziale Medien</paper-item>
<paper-item >Bildergalerie</paper-item>
<paper-item >Vertragsdaten</paper-item>
</div>
</template>
<template is="dom-if" unless="[[selected!=null]]">
Kein Restaurant ausgewählt
</template>
</div>
<div class="body">

<section>
<h2>Ihre Restaurants</h2>
<p>This is a text-only page.</p>
<p>It doesn't do anything other than display some static text.</p>
</section>
</div>
</div>
`;
}

static get properties() {
return {
selected: {
type: Object,
reflectToAttribute: true,
notify: true,
value: null
},
page: {
type: String,
value: "restaurants"
},
detail: {
type: String,
value: ""
},
subNav: {
type: String,
value: ""
}
}
}

ready() {
super.ready();
this.addEventListener('restaurantSelected', this._selectedChanged);
}

_navigateSub(e) {
console.log(e);
window.history.pushState({}, '', "/app/" + this.page + "/" + this.detail + "/" + this.subNav);
navigate(window.location);
}

_selectedChanged(e) {
this.selected = e.detail;
}

stateChanged(state) {
this.page = state.app.page;
this.detail = state.app.detail;
this.subNav = state.app.subNav;
}
}

window.customElements.define('restaurants-page', RestaurantsPage);
0

The issue is caused by 

${ SharedStylesPolymer }

interpolation; please vote for https://youtrack.jetbrains.com/issue/WEB-28540 to be notified on any progress with it

1

Thanks! I suspected something like that

0
// language=HTML
does not work for me, in Lit-element / Lit-html
0

Please sign in to leave a comment.