通过 Polymer 中的内容标签访问轻量级 DOM

本文介绍了通过 Polymer 中的内容标签访问轻量级 DOM的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

上下文:

我正在 Maverics MacOX (10.9.2) & 上使用聚合物 (0.2.4)Chrome 代理 (34.0.1847.131) 构建 Web 组件.特别是，我试图通过 content 标签来部分丰富其他模板中包含的两个组件(foo 和 bar).扩充包括添加新属性以在其各自的内部模板中使用它们(第 (3) 行和第 (4) 行).我不确定这种方法是否能正常工作，这正是我所需要的.但这让我遇到了以下问题.

问题:

我试图从 JS 访问包含在模板中的内容标签的 light-DOM 节点.基本上我的意图可以在以下片段中描述.我需要访问第 (1) 和 (2) 行中的节点 foo 和 bar:

<模板><div id="容器"><content select="[role='rA']"></content><content select="[role='rB']"></content>

<脚本>聚合物 ('wc-tag',{domReady: 函数 () {var c = this.$.container;var rA = c.querySelector('[role="rA"]');//(1)var rB = c.querySelector('[role="rB"]');//(2)rA.setAttribute('mode', 'active');//(3)rB.setAttribute('editable', true);//(4)...}});</聚合物元素><wc-标签><wc-foo role="rA">Foo</wc-foo><wc-bar role="rB">Bar</wc-bar></wc-tag>

尽管如此，在rA 和rB 中都获得了空值.我已经确认，在评估代码时，content 标记尚未解析(content 是 <div id="container" 的两个唯一孩子>).

问题:

有人知道我如何/何时可以/应该访问 foo 和 bar 吗?

解决方案

棘手，我还没有用 Polymer 做过这个，所以这里有一些猜测.让我知道这是否有效(如果无效，请发布 jsbin :)

这是我的理解.在 shadow dom 中， 节点并不完全将 元素作为子元素.这些仍然是 light dom 的一部分，它们只是被有效地复制了.因此，因为您在 shadow dom 中为 role="rA" 的元素查询 this.$.container 的孩子，所以您将找不到它们，因为它们是在光明之域.两个选项:您可以为 节点提供标识属性，以便您可以选择它们，然后调用 getDistributedElements() ；或者你可以做 this.querySelector 而不是 this.$.container.querySelector.

相关阅读:如何设置分布式节点的样式

Context:

I am working with polymer (0.2.4) on Maverics MacOX (10.9.2) & Chrome agent (34.0.1847.131) building up web components. Particularly, I am trying to partially enrich two components (foo and bar) included in other template by means of a content tag. The enrichment consists of adding new attributes for using them within their respective inner templates (lines (3) and (4)). I am not sure whether this approach will work properly which is what I need. But it gets me to the following problem.

Problem:

I am trying to access from JS the light-DOM nodes included in a template by a content tag. Essentially my intention can be depicted in the following snippet. I need to access nodes foo and bar in lines (1) and (2):

<polymer-element name="wc-tag"> <template> <div id="container"> <content select="[role='rA']"></content> <content select="[role='rB']"></content> </div> </template> <script> Polymer ('wc-tag',{ domReady: function () { var c = this.$.container; var rA = c.querySelector ('[role="rA"]'); // (1) var rB = c.querySelector ('[role="rB"]'); // (2) rA.setAttribute ('mode', 'active'); // (3) rB.setAttribute ('editable', true); // (4) ... } }); </script> </polymer-element> <wc-tag> <wc-foo role="rA">Foo</wc-foo> <wc-bar role="rB">Bar</wc-bar> </wc-tag>

Nevertheless, a null value is obtained in both rA and rB. I have confirmed that when code is evaluated, the content tags have not been resolved yet (content are the two only children with <div id="container">).

Question:

Does anybody knows how/when could/should I access foo and bar?

解决方案

Tricky, I haven't done this with Polymer yet so there's a bit of speculation here. Let me know if this works (and post a jsbin if it doesn't :)

Here's my understanding. In the shadow dom, the <content> nodes don't exactly have the <wc-foo/bar> elements as children. Those are still part of the light dom, they're just effectively copied over. So because you're querying for children of this.$.container in the shadow dom for elements with role="rA" you won't find them because they're in the light dom. Two options: you could give the <content> nodes identifying attributes so you can select them and then call getDistributedElements() on them; or you could do this.querySelector rather than this.$.container.querySelector.

Related reading: How to style distributed nodes