0

In a custom element template, assume a string such as hello\world stored as this.foo.

How may I replace \n by <br /> ?

Several posts found on SE mention Juicy (https://github.com/Juicy/juicy-html) Others use a custom element as a wrapper (see Bind text with line breaks)

But isn't there a more straightforward method, what about doing something like:

<template is="dom-repeat" items="{{bubbles}}">
  <li><span class="content">{{getContent(item)}}</span></li>
</template>

And 

getContent: function(item) {
    return item.content.replace(/\\n/g, "<br />")
}

Problem is that the <br /> isn't evaluated as an HTML element

So isn't there a proper way to validate a string against certain allowed tags (br in this case), or must I really go the Juicy way ?

What do you think ? ;)

Community
  • 1
  • 1
rud
  • 59
  • 7
  • It gets computed as `HTML` if you use `innerHTML` property see [this](http://stackoverflow.com/questions/21060890/how-to-assign-html-entities-in-polymer-element-definition). I know you are calling it from function, but see if you can use this. – a1626 Jul 04 '16 at 13:34
  • Well, yes, this is the equivalent of using a dummy wrapper element around the content. This is a possibility, but.. It feels like using a bazooka to shoot a fly :/ I wonder if there is a way to validate that HTML and inject it, like many fw do when injecting HTML into templates... – rud Jul 04 '16 at 14:00

1 Answers1

-1

Well, it seems the best (and only?) way to achieve this right now is to pass the HTML string as an argument to my custom-element, than use innerHTML to inject the HTML in said custom-element...

Which is exactly what Juicy (https://github.com/Juicy/juicy-html) does.

Conclusion, either use innerHTML yourself in your custom-element, or use Juicy ;)

rud
  • 59
  • 7