随着 Web 组件和 Polymer 等支持库的日益普及，自定义元素已成为构建界面功能的有吸引力的方式。自定义元素的默认封装使得它们对于创建独立的 widget 特别有用。
虽然一些微件是独立的，但其中许多微件依赖外部数据向用户显示内容，例如，天气微件的当前天气预报或地图微件的公司地址。
在 Polymer 中，自定义元素是声明式的，也就是说，在将自定义元素导入项目后，可以非常轻松地在 HTML 中添加和配置这些元素，例如通过传递数据来填充微件。
如果我们可以重复使用相同的数据片段来填充不同的微件，并告知搜索引擎和其他消费者有关我们网页内容的信息，那么就可以避免重复并确保数据一致性，这将会非常棒。为此，我们可以为数据使用 schema.org 标准和 JSON-LD 格式。
使用结构化数据填充组件
通常，JSON 是将数据注入特定 widget 的一种便捷方式。随着对 JSON-LD 的支持越来越多，我们可以重复使用相同的数据结构，将网页内容的确切含义告知界面、搜索引擎和其他使用结构化数据的用户。
通过将网络组件与 JSON-LD 结合使用，我们可以为应用创建定义完善的架构：
- schema.org 和 JSON-LD 表示数据层，其中 schema.org 提供数据的词汇表，而 JSON-LD 则构成数据的格式和传输方式；
- 自定义元素表示表示层，可配置并与数据本身分离。
示例
我们来看一个示例 - 这个页面列出了几个 Google Office 位置：https://github.com/googlearchive/structured-data-web-components/tree/master/demo
它包含两个微件：一个地图，每个办公室都包含一个图钉，另一个是包含位置列表的下拉菜单。这两个微件必须向用户提供相同的数据，并且相应网页可供搜索引擎读取。
在此演示中，我们将使用 LocalBusiness 实体来表达数据的含义，即一些 Google 办事处的地理位置。
若要了解 Google 如何读取此网页并将其编入索引，最好的办法是使用经过改进的全新结构化数据测试工具。在 Fetch 网址（提取网址）部分提交演示的网址，然后点击 Fetch and verify（提取并验证）。右侧部分将显示从该网页检索到的已解析数据，以及可能出现的任何错误。这是一种非常便捷的方法，可用于检查您的 JSON-LD 标记是否正确以及是否可由 Google 处理。
您可以在网站站长中心博文中详细了解此工具及其改进之处。
将组件关联到结构化数据源
该演示的代码以及用于构建该演示的 Web 组件的代码可在 GitHub 上获取。我们来看一下 combined-demo.html 页面源代码。
首先，我们使用 JSON-LD 脚本将数据嵌入网页：
<script type="application/ld+json">
{...}
</script>
通过这种方式，我们可以确保其他支持 schema.org 标准和 JSON-LD 格式的消费者（例如搜索引擎）可以轻松访问这些数据。
第二步，我们使用两个网络组件来显示数据：
- address-dropdown-jsonld - 此元素会创建一个下拉菜单，其中包含在“jsonld”属性中传递的所有营业地点。
- google-map-jsonld - 此元素会创建一个 Google 地图，在“jsonld”属性中传递的每个位置都带有图钉。
为此，我们使用 HTML 导入功能将这些内容导入网页。
<link rel="import" href="bower_components/google-map-jsonld/google-map-jsonld.html">
<link rel="import" href="bower_components/address-dropdown-jsonld/address-dropdown-jsonld.html">
导入后，我们可以在页面上使用它们：
<address-dropdown-jsonld jsonld=""></address-dropdown-jsonld>
<google-map-jsonld jsonld=""></google-map-jsonld>
最后，我们将 JSON-LD 数据和元素关联起来。我们在 polymer-ready callback（一个事件，会在组件可供使用时触发）中执行此操作。由于这些元素可通过属性进行配置，因此将 JSON-LD 数据分配给组件的相应属性就足够了：
document.addEventListener('polymer-ready', function() {
var jsonld = JSON.parse(
document.querySelector(
'script[type="application/ld+json"]').innerText);
document.querySelector('google-map-jsonld').jsonld = jsonld['@graph'];
document.querySelector('address-dropdown-jsonld').jsonld = jsonld['@graph'];
});
JSON-LD，是 JSON 的强大功能兄弟
您可能已经注意到，这与使用普通的旧 JSON 传递数据非常相似。不过，JSON-LD 具有一些优势，这些优势直接取决于其 schema.org 兼容性：
- 数据结构清晰明了，并符合 schema.org 标准。这是一项非常重要的优势，因为它可确保您可以为任何支持 JSON-LD 的网络组件提供有意义且一致的输入。
- 搜索引擎可以有效地利用这些数据，从而改进网页的索引编制效果，并可能会在搜索结果中显示富媒体搜索结果。
- 如果您以这种方式编写网络组件，则无需学习或设计新结构（和文档）来存放组件所需的数据，因为 schema.org 已经在为您完成所有繁杂的工作并建立共识。此外，您还可以更轻松地构建由兼容组件组成的整个生态系统。
总而言之，JSON-LD 和 schema.org 与网络组件技术相结合，能够构建便于开发者和搜索引擎使用的可重复使用的封装界面部分。
自行创建组件
您可以尝试 GitHub 上的示例或阅读 Polymer 关于创建可重复使用的组件的指南，开始编写您自己的组件。 请参阅 developers.google.com 上的结构化数据文档，了解您可以使用 JSON-LD 标记的各种实体。
不妨考虑向 @polymer 致谢，展示您所创建的自定义元素！