【发布时间】：2015-06-20 15:07:05
【问题描述】：
我正在尝试将<template> 以正确的方式注入并显示到 Polymer Web 应用程序中，但我遇到了一些困难。 （……或者我误解了 1.0 文档？）
documentation about manipulation the DOM 说：
Polymer 提供了用于操作 DOM 的自定义 API，以便正确维护本地 DOM 和轻量级 DOM 树。这些方法和属性与其标准 DOM 等效项具有相同的签名，只是返回节点列表的属性和方法返回的是 Array，而不是 NodeList。
注意：所有 DOM 操作都必须使用此 API，而不是直接在节点上使用 DOM API。
所以我想我必须在任何地方使用Polymer.dom API 来操作 DOM，这对我来说很有意义，因为这样 Polymer 可以与生成的 shady DOM 保持同步。没有DOM.appendChild()，而是Polymer.dom().appendChild()。直接操作 shady DOM 也不是一个好主意……还是会这样？
想象一个简单的页面结构：
<body>
<template is="dom-bind" id="app">
<main>
<template is="dom-bind" id="content">
<p>Lorem ipsum dolor sit amet.</p>
</template>
</main>
</template>
</body>
还有第二个小sn-p，我可以将其导入页面。
<template id="snippet">
<p>Consectetur adipisici elit.</p>
</template>
此模板应替换/引用为#content。那么，让我们开始吧。
导入 sn-p 很容易。我可以获取它并获取它的 DOM 元素。
Polymer.Base.importHref('/snippet', function(e) {
// on success: imported content is in e.target.import
var template = Polymer.dom(e.target.import).querySelector('#snippet');
// until here it works, `template` is the template from my snippet
...
现在我想我必须将其附加到我的template#app 并将template#content 的ref 更改为content...如果仍然支持更改ref？我该怎么做？无论我如何处理，我每次都会卡住。
var app = Polymer.dom(this).querySelector('#app'); // Works, is template#app
var app = document.querySelector('#app'); // Same result
Polymer.dom(app).appendChild(template); // will append it, but outside of the document fragment
Polymer.dom(app.root).appendChild(template); // won't do anything
Polymer.dom(app).querySelector('template'); // undefined
Polymer.dom(app.root).querySelector('template'); // undefined
app.querySelector('template'); // undefined
我研究了数小时和数天，试图找到解决方案。它适用于标准 DOM API，但我认为这不是正确的方法。如果有人能解决我的困惑，那就太好了。
编辑： 或者Polymer.dom(this) 会这样做，我不需要打电话给Polymer.dom(app)？但是，我再次尝试了它，它不会工作。啊啊啊，真是太混乱了。
【问题讨论】：
-
您的用例到底是什么？例如，您的
#snippet不能是<div>标签有什么原因吗？顺便说一句，我认为目前在 Polymer 1.0 中没有直接替代ref的方法。此外，如果您尝试强制将数据绑定模板插入 DOM，您可能会很不走运，因为 github.com/Polymer/polymer/issues/1778 不支持它。 -
我在 Google I/O Webapp 中看到过这个过程，它看起来很干净。您只需在文档末尾附加一个模板，然后在其他地方引用它——繁荣，它就会显示出来。但是 I/O Webapp 使用 v0.8（甚至是 v0.5？）。太可惜了，这不再受支持了。
-
我认为我的问题/困惑是新的 shady DOM 将 Web 组件置于 Shadow DOM 之外，我不知道 where 和 how 操纵它。对我来说，操作原始 DOM 是合乎逻辑的，Polymer 保持 shady DOM 与它同步。但是使用
Polymer.dom()我最终会操纵阴暗的 DOM，感觉很脏。 -
见here。似乎无法添加模板引用支持，直到可以更新基本 API 以支持在实例时动态添加绑定。所以，我想这与为什么这相当困难有关。
-
我的用例是将自定义模板从外部注入到复杂的迭代自定义元素中。我认为这很常见？考虑一个元素进行数据库查询并呈现它。我想自定义格式..我错过了什么吗？
标签： polymer polymer-1.0