polymer 绑定html元素,html – 如何在Polymer中使用content元素？

所以我们对

DOM Distribution有一点描述：

To support composition of an element’s light DOM with its local DOM,Polymer supports the element. The element provides an insertion point at which an element’s light DOM is combined with its local DOM. The element supports a select attribute which filters nodes via a simple selector.

In shadow DOM,the browser maintains separate light DOM and shadow DOM trees,and creates a merged view (the composed tree) for rendering purposes.

In shady DOM,Polymer maintains its own light DOM and shady DOM trees. The document’s DOM tree is effectively the composed tree.

如果有人想要了解< content>的详细信息,这并不算太多.元素做,所以一个工作的例子可能是纸工具栏元素:)只是一个简单的类选择,它向我们显示select是一个querySelector过滤器：

在HTML中,您可以像这样使用纸质工具栏：

Middle Title

Bottom Title

模板有这个：

因此,您可以看到您可以使用CSS选择器过滤内容“slot”,而没有select的内容应该包含所有子内容.

在JavaScript中,您还可以访问< content>插槽内容两种方式;你可以从一个包含内容的容器元素中获取子元素,你可以使用this.getContentChildren(‘#content_id’),它将为你提供元素Array.

Polymer有一个更详细的API来处理< content>,以及他们网站上的描述：

https://www.polymer-project.org/1.0/docs/devguide/local-dom#light-dom-children

UPDATE

从2.0< content>将是< slot>从1.7开始,他们添加了用于预迁移的slot元素,你应该使用它.它与内容元素选择器略有不同,您只能设置名称属性,在外部您必须使用该名称来指定要放入的插槽：

title

content

遗憾的是,slot并没有从DOM中获取所有指定的slotted元素,因此我们必须重新设计一些之前使用过css选择器的元素.