在 Dart Polymer 中动态导入 HTML 模板

Question

我已成功使用 dart 动态创建聚合物组件并添加到 dom。

但现在我想这样做无需在编译时静态导入 HTML 模板。

在我的用例中，我有一个 ID 为 myContainer 的 div 容器和一个标签为 my-tag 的自定义 Polymer Dart 组件。

我试过了：

LinkElement e = new LinkElement('link');
e.rel = 'import';
e.href= 'my-tag.html';
document.head.children.add(e);

$['myContainer'].children.add(new Element.tag('my-tag'));

但这最终会出现以下异常：

Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Nodes of type 'HTML' may not be inserted inside nodes of type '#document'. 
...

请注意，将聚合物元素添加到 dom 时会引发异常，而不是在添加链接标记时引发异常。如果在编译时添加链接并注释在运行时添加它的代码，同样的代码也可以工作。

我也尝试了上面代码的几种不同变体，主要是在polymerInit 之前或polymerInit().run(...) 内部调用的单独方法中添加链接标记，但没有任何变化。

我想知道这个用例是否受支持。

Answer 1

也许可以创建一个可以做到这一点的转换器。 转换器由 pub build 和 pub serve 执行，可以在构建过程中分析和修改代码。 dartlang.org/tools/pub/assets-and-transformers.html, dartlang.org/tools/pub/transformers

或

（我没有尝试过，但我认为它会起作用）
您可以创建一个 HTML 文件，其中包含您的包所需的所有导入，并且您的包的用户只需要导入这个文件。

Answer 2

尝试添加一个 HeadElement：

 LinkElement e = new LinkElement();
 e.rel = 'import';
 e.href= 'my-tag.html';
 HeadElement h = new HeadElement();
 h.children.add(e);
 document.head.children.add(h);