通过 Polymer 中的内容标签访问轻量级 DOM [英] Accessing the light DOM included by means of a content tag in Polymer
问题描述
上下文:
我正在 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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!