how to embed html code in template in polymer3 (like 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>";
 }

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.

score 2 · Answer 1 · answered Aug 10 '18 at 07:50

2

How about using inner-h-t-m-l attribute

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

answered Aug 10 '18 at 07:50

Hyyan Abo Fakher

3,497
3
21
35

it looks so hacky code... another way,how do i use inner-h-t-m-l in code like this? `static get template() { return html `[[iconStr]]`; } get iconStr() { return "123"; }` – Kent Wood Aug 16 '18 at 10:20

score 1 · Answer 2 · edited Aug 18 '18 at 13:56

1

You can use multiline String

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

Test on Plnkr

edited Aug 18 '18 at 13:56

Hyyan Abo Fakher

3,497
3
21
35

answered Aug 10 '18 at 12:02

Pascal L.

1,261
9
21

score 0 · Accepted Answer · edited Aug 27 '18 at 10:10

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

how to embed html code in template in polymer3 (like unsafeHTML)

3 Answers3