如何在Polymer中使用content元素？

Question

从文档中可以看出,该<content>元素支持一个select通过简单选择器过滤节点的属性.

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

Answer 1

所以我们有关于DOM Distribution的这个小描述:

为了支持元素的轻DOM与其本地DOM的组合,Polymer支持该<content>元素.该<content>元素提供了一个插入点,元素的轻DOM与其本地DOM相结合.该<content>元素支持select属性,该属性通过简单的选择器过滤节点.

在shadow DOM中,浏览器维护单独的light DOM和shadow DOM树,并创建合并视图(组合树)以进行渲染.

在Shady DOM中,Polymer维护着自己的轻量级DOM和阴暗的DOM树.文档的DOM树实际上是组合树.

如果有人想要一些关于<content>元素可以做什么的细节,这不是太多,所以一个工作的例子可能是纸工具栏元素:)只有一个简单的类选择,它向我们显示选择是querySelector过滤器:

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

<paper-toolbar class="tall">
    <paper-icon-button icon="menu"></paper-icon-button>
    <div class="middle title">Middle Title</div>
    <div class="bottom title">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它们加入预迁移插槽元素,你应该使用.它与内容元素选择器略有不同,您只能设置name属性,在外部必须使用该名称来指定要放入的插槽:

<template>
    <!-- style -->
    <paper-toolbar>
        <slot name="header"></slot>
    </paper-toolbar>
    <slot name="content"></slot>
</template>

<my-element>
    <div class="title" slot="header">title</div>
    <div slot="content">content</div>
</my-element>

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