如何在 Polymer 中使用内容元素？

Question

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

所以针对某个内容元素的light dom元素应该包含一个css class label/tag/value 允许浏览器将其映射到相应的在 select 属性中设置了 css tag/label/value 的内容元素？是否包含没有此类标签的轻 dom 元素映射到没有 select 属性的 <content> 元素？列举可能性的示例将非常有帮助。

Answer 1

所以我们有关于 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> 元素可以做什么的一些细节，这并不过分，所以 paper-toolbar 元素可以作为一个工作示例 :) 不仅仅是一个简单的 class select，这向我们展示了 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>

所以你可以看到你可以过滤带有 CSS select 或 select 的内容“插槽”，而没有 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

更新

从 2.0 开始，<content> 将变为 <slot>，从 1.7 开始，它们添加了用于预迁移的插槽元素，您应该使用它。它与内容元素有点不同 select 或者你只能设置一个 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>

遗憾的是插槽并没有获取所有指定的插槽元素，只有 DOM 中的第一个元素，所以我们必须重新设计一些使用 css select 或之前。

如何在 Polymer 中使用内容元素？

How to use the content element in Polymer?

html

web-component

shadow-dom

polymer

polymer-1.0