html – 如何在Polymer中使用content元素？

概述从 documentation开始,它表示< content> element支持select属性,该属性通过简单的选择器过滤节点. 那么针对某个内容元素的light dom元素是否应该包含一个css类标签/标签/值,允许浏览器将其映射到在select属性中设置了css标签/标签/值的相应内容元素？包含的光dom元素没有映射到< content>的这种标签.没有选择属性的元素？枚举可能性的一个例子 从 documentation开始,它表示< content> element支持select属性,该属性通过简单的选择器过滤节点.

那么针对某个内容元素的light dom元素是否应该包含一个CSS类标签/标签/值,允许浏览器将其映射到在select属性中设置了CSS标签/标签/值的相应内容元素？包含的光dom元素没有映射到< content>的这种标签.没有选择属性的元素？枚举可能性的一个例子将非常有用.

解决方法 所以我们对 DOM Distribution有一点描述：

To support composition of an element’s light DOM with its local DOM,polymer supports the <content> element. The <content> element provIDes an insertion point at which an element’s light DOM is combined with its local DOM. The <content> 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中,您可以像这样使用纸质工具栏：

<paper-toolbar >    <paper-icon-button icon="menu"></paper-icon-button>    <div >MIDdle Title</div>    <div >Bottom Title</div></paper-toolbar>

模板有这个：

<template>    <!-- style --->    <div ID="topbar" class$="toolbar-tools [[_computebarExtraClasses(justify)]]">        <content select=":not(.mIDdle):not(.bottom)"></content>    </div>    <div ID="mIDdlebar" class$="toolbar-tools [[_computebarExtraClasses(mIDdleJustify)]]">        <content select=".mIDdle"></content>    </div>    <div ID="bottombar" class$="toolbar-tools [[_computebarExtraClasses(bottomJustify)]]">        <content select=".bottom"></content>    </div></template>

因此,您可以看到您可以使用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元素,你应该使用它.它与内容元素选择器略有不同,您只能设置名称属性,在外部您必须使用该名称来指定要放入的插槽：

<template>    <!-- style -->    <paper-toolbar>        <slot name="header"></slot>    </paper-toolbar>    <slot name="content"></slot></template><my-element>    <div  slot="header">Title</div>    <div slot="content">content</div></my-element>

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

总结

以上是内存溢出为你收集整理的html – 如何在Polymer中使用content元素？全部内容，希望文章能够帮你解决html – 如何在Polymer中使用content元素？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。