Question

来自documentation它表示<content>元素支持select属性，该属性通过简单的选择器过滤节点。

因此，针对特定内容元素的灯光dom元素应包含css类标签/标签/值，以允许浏览器将其映射到具有该css标签/标签/值的相应内容元素。 select属性？是否包含没有此类标签的light dom元素映射到没有<content>属性的select元素？枚举可能性的一个例子将非常有用。

Answer 1

因此，我们对DOM Distribution：

进行了一些描述

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

在shadow DOM中，浏览器维护单独的轻型DOM和阴影DOM树，并创建合并视图（组合树）以进行渲染。

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

如果有人想要了解<content>元素可以做什么的一些细节，这不是太多，所以一个工作的例子可能是纸工具栏元素:)只是一个简单的类选择，这向我们展示了select是一个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>

所以你可以看到你能够过滤内容＆＃34; slot＆＃34;使用CSS选择器，没有选择的内容应该包含所有子内容。

在JavaScript中，您还可以双向访问<content>广告位内容;你可以从包含内容的容器元素中获取子元素，你可以使用this.getContentChildren('#content_id')来获得元素数组。

Polymer有一个更详细的API可用于<content>，以及其网站上的说明：

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

<强>更新

从2.0 <content>将是<slot>，并且从1.7添加了用于预迁移的slot元素，您应该使用它。它与内容元素选择器略有不同，您只能设置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选择器的元素。

如何在Polymer中使用content元素？

1 个答案: