Is there a way to prevent HTML prefixing inside a Polymer expression?

Question

My colleague Patrick and I are currently converting an autocomplete component from the web interface to Polymer.dart. In the web interface, we have provided a list of HTML visualizations for autocompletion to give the programmer the ability to style the results. Based on the input value, we filtered the list and displayed the corresponding results.

What do you recommend to achieve the same behavior in Polymer.dart? Should we approach this in a completely different way?

Old web user interface:

<template iterate="entry in filteredEntries">
  <li class="b-autocomplete-results-li">{{ entry.sanitizedHtml }}</li>
</template>

Class for one entry:

class AutocompleteEntry {

  final String id;
  final String searchableText;
  final Element _element;

  AutocompleteEntry(this.id, this.searchableText, this._element) {
    // remove the data-id and data-text since we don't need them in the html
    _element.dataset.remove('text');
    _element.dataset.remove('id');
  }

  get sanitizedHtml {
    var validator = new NodeValidatorBuilder()..allowHtml5();
    var documentFragment = document.body.createFragment(_element.outerHtml, validator: validator);
    return documentFragment;
  }
}

Answer 1

Update

Dart Polymer 1.0 bwu-bind-html

---

, . , XSS. <safe-html>.

HTML Polymer.dart .