上下文:
我正在 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
更多推荐
通过 Polymer 中的内容标签访问轻量级 DOM
发布评论