如何在 polymer3 的模板中嵌入 html 代码(如 unsafeHTML)
how to embed html code in template in polymer3 (like unsafeHTML)
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>";
}
我希望 partHtml
像普通 HTML 一样注入到模板中。
我知道 unsafe HTML in lit-element 可以做到,但是 lit-element 就是不能用 super.render()
东西,不像 polymer-element 那样方便
如何使用 inner-h-t-m-l
属性
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' inner-h-t-m-l="[[partHtml]]"></p>
`;
}
get partHtml()
{
return "<span>hello</span>";
}
您可以使用多行字符串
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'>${this.partHtml}</p>
`;
}
static get partHtml() {
return html`<span>hello</span>`;
}
终于在调试调用栈的时候找到了答案。
只需使用 htmlLiteral
,关键代码如下
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>` ;
}
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>";
}
我希望 partHtml
像普通 HTML 一样注入到模板中。
我知道 unsafe HTML in lit-element 可以做到,但是 lit-element 就是不能用 super.render()
东西,不像 polymer-element 那样方便
如何使用 inner-h-t-m-l
属性
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' inner-h-t-m-l="[[partHtml]]"></p>
`;
}
get partHtml()
{
return "<span>hello</span>";
}
您可以使用多行字符串
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'>${this.partHtml}</p>
`;
}
static get partHtml() {
return html`<span>hello</span>`;
}
终于在调试调用栈的时候找到了答案。
只需使用 htmlLiteral
,关键代码如下
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>` ;
}