My colleague Patrick & I currently converting an autocomplete component from Web UI to Polymer.dart.In Web UI we provided a HTML rendered list to the autocomplete in order to give a programmer the opportunity to style the results. Based on the input's value we filtered the list and displayed the matching results.
What would you recommend to achieve the same behaviour in Polymer.dart? Should we approach this completly differently?
Old Web UI code:
<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;
}
}
Update
A ready-to-use element for Dart Polymer 1.0 is bwu-bind-html
No there isn't. This is intentional because it is prone to XSS attacks.
What you can do is to use an element like <safe-html> instead.
My answer to this question HTML Tags Within Internationalized Strings In Polymer.dart shows the full source code.
来源：https://stackoverflow.com/questions/25058638/is-there-the-a-way-to-prevent-html-escaping-inside-a-polymer-expression