Как встроить HTML-код в шаблон в Polymer3 (например, unsafeHTML)

Question

пожалуйста, проверьте поршень

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.

Я знаю, что небезопасный HTML в lit-element может это сделать, но lit-element просто не может использовать super.render() Вещи, это не удобно, как полимер-элемент.

Answer 1

Наконец, я нашел ответ при отладке в стек вызовов. просто используйте 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>` ;
  }

Answer 2

Как насчет использования 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>";
 }

Answer 3

Вы можете использовать многострочную строку

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>`;
}

Тест на плнкр