static get template() {
return html`
<p>This content is from ChildClass.</p>
<p>${super.template}</p>
<p>Hello again from ChildClass.</p>
<p style='color:red'>[[partHtml]] <==== this should be 'hello'</p>
`;
}
get partHtml()
{
return "<span>hello</span>";
}
I want partHtml
to be injected into a template like normal HTML.
I know unsafe HTML in lit-element can do that, but lit-element just can't use super.render()
things, it is not convenient like polymer-element.
Finally, I found the answer when I debug into the call stack.
just use htmlLiteral
, key code likes this
import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer@3.0.5/polymer-element.js'
import {htmlLiteral} from 'https://unpkg.com/@polymer/polymer@3.0.5/lib/utils/html-tag.js'
....
static get template() {
return html`<p style='color:red'>${this.partHtml} <==== this should be 'hello'</p>`;
}
static get partHtml()
{
return htmlLiteral `<span>hello</span>` ;
}