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

Question

从documentation 中可以看出<content> 元素支持select 属性，该属性通过简单的选择器过滤节点。

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

Answer 1

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

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

在 shadow DOM 中，浏览器维护单独的 light DOM 和 shadow DOM 树，并创建一个合并视图（组合树）用于渲染。

在 shady DOM 中，Polymer 维护自己的 light DOM 和 shady DOM 树。文档的 DOM 树实际上是组合树。

如果有人想详细了解<content> 元素可以做什么，这并不过分，所以一个工作示例可能是 paper-toolbar 元素:) 不仅仅是一个简单的类选择，它是向我们展示了 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 选择器过滤内容“插槽”，并且没有选择的内容应该包含所有子内容。

在 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 中获取所有指定的 slot 元素，只有第一个元素，所以我们必须重新设计一些之前使用 css 选择器的元素。