编辑器升级后，Dart删除不允许的属性

Question

在SDK 0.7.3.1_r27487中升级 Dart 编辑器后，遇到错误“删除不允许的属性”。

我有一个自定义标签，其中的模板包含boostarp属性“data-target”和“data-toggle”。它可以在以前的版本下运行，但升级后会遇到错误。

安慰

Removing disallowed attribute <A data-toggle="dropdown">
Removing disallowed attribute <BUTTON data-target=".navbar-collapse">
Removing disallowed attribute <BUTTON data-toggle="collapse">

.html代码

<element extends="div" name="x-navbar" constructor="Navbar">
<template>    
  ..
  <a name="top" href="#" class="dropdown-toggle" data-toggle="dropdown">Shop <b class="caret"></b></a>
  ..
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"></button>
</template>
<script type="application/dart" src="custom_ui.dart"></script> 
</element>

Answer 1

您可能正在使用Element.innerHtml。您应该改为使用Element.setInnerHtml。

如使用该新方法的参数所看到的，HTML代码现在已被验证和过滤。要恢复旧的行为，您必须提供允许所有属性的验证器或树清理器。

要明确允许 anchor 和按钮上的“数据”:

// Call NodeValidatorBuilder.allowX() methods to customize the validator.

final NodeValidatorBuilder _htmlValidator=new NodeValidatorBuilder.common()
  ..allowElement('a', attributes: ['data-target', 'data-toggle'])
  ..allowElement('button', attributes: ['data-target', 'data-toggle']);

query('#anElement').setInnerHtml('a content', validator: _htmlValidator);

Element和 CustomElement类在多个地方使用HTML清理功能( Element.html工厂， innerHtml属性， createFragment方法...)。

即使您没有在自己的代码中直接使用这些方法，它们也会被基础的Dart库调用( CustomElement类是为 Polymer库创建的，但最新版本的 Web UI库也使用了这些方法)。

目前，尚无法全局禁用或自定义默认的清理规则。因此，我想您将不得不处理 setInnerHtml调用...或等待另一个SDK版本来解决此问题(“data-”属性是有效的HTML5代码，但默认的清理过滤器不允许它们以及内联样式:为什么将这些属性视为不安全？)。

注意:您应该将 switching from Web UI to Polymer视为 Web UI is now deprecated。