自动将html字符串转换为元素答案

【问题标题】：Auto convert html string to element自动将html字符串转换为元素
【发布时间】：2026-01-26 22:15:01
【问题描述】：

假设我有一个聚合物元素<polymer-element> <div id="foo"> {{html}} </div> </polymer-element>，其中html 应该是一个HTML 格式的字符串，比如<p>blah</p>，我想要的是，当html 发生变化时，聚合物元素也会发生变化，并使用html 作为其innerHtml，即自动将字符串转换为元素并将其作为foo 的子元素插入。

polymer/polymer_expression 可以为我执行此操作，还是我必须执行 querySelector()，然后手动将 html 设置为 innerHtml？

【问题讨论】：

标签： dart polymer dart-polymer

【解决方案1】：

我的解决方案是一个自定义元素，它扩展了一个 div 并使用 DocumentFragment 类通过数据绑定将 HTML 字符串解析到 DOM 中。

来自我的Github gist

<!-- Polymer Dart element that allows HTML to be inserted into the DOM via data binding -->

<link rel="import" href="packages/polymer/polymer.html">

<polymer-element name="html-display" extends="div">
  <script type="application/dart">
    import 'dart:html';
    import 'package:polymer/polymer.dart';

    @CustomTag('html-display')
    class HtmlDisplay extends DivElement with Polymer, Observable {
      @published String htmlContent;

      // we need this stuff because we're extending <div> instead of PolymerElement
      factory HtmlDisplay() => new Element.tag('div', 'html-display');
      HtmlDisplay.created() : super.created() {
        polymerCreated();
      }

      @override void attached() {
        super.attached();
      }

      // respond to any change in the "htmlContent" attribute
      void htmlContentChanged(oldValue) {
        if (htmlContent == null) {
          htmlContent = "";
        }

        // creating a DocumentFragment allows for HTML parsing
        this.nodes..clear()..add(new DocumentFragment.html("$htmlContent"));
      }
    }
  </script>
</polymer-element>

<!--
Once you've imported the Polymer element's HTML file, you can use it from another Polymer element like so:

<link rel="import" href="html_display.html">

<div is="html-display" htmlContent="{{htmlString}}"></div>

*htmlString* can be something like "I <em>love</em> Polymer Dart!"
-->

【讨论】：

【解决方案2】：

我使用https://*.com/a/20869025/789338 中描述的解决方案。关键类是DocumentFragment。

【讨论】：

【解决方案3】：

官方的做法在文档中有描述：https://www.polymer-project.org/docs/polymer/databinding-advanced.html#boundhtml

文档上的例子：

<polymer-element name="my-element">
  <template>
    <div id="message_area"></div>
  </template>
  <script>
    Polymer({
      message: 'hi there',
      ready: function() {
        this.injectBoundHTML('<b>{{message}}</b>', this.$.message_area);
      }
    });
  </script>
</polymer-element>

【讨论】：