随着 Web 组件和 Polymer 等支持库的普及，自定义元素已成为构建界面功能的一种有吸引力的方式。自定义元素的默认封装使自定义元素特别适合创建独立的 widget。
虽然有些微件是自包含的，但许多微件都依赖于外部数据来向用户呈现内容，例如，天气微件的当前预报或地图微件的公司地址。
在 Polymer 中，自定义元素是声明式的，这意味着自定义元素导入到项目中后，可以非常轻松地在 HTML 中添加和配置它们，例如通过属性传递数据来填充 widget。
如果我们可以重复使用相同的数据段来填充不同的微件，并告知搜索引擎和其他使用方网页的内容，以避免重复并确保数据一致性，那就太棒了。为此，我们可以为数据使用 schema.org 标准和 JSON-LD 格式。
使用结构化数据填充组件
通常情况下，JSON 是一种将数据注入特定 widget 的便捷方式。随着对 JSON-LD 的支持不断增强，我们可以重复使用相同的数据结构，以便向界面以及搜索引擎和其他结构化数据使用方告知网页内容的确切含义。
通过将 Web 组件与 JSON-LD 结合使用，我们可以为应用创建一个定义明确的架构：
- schema.org 和 JSON-LD 代表数据层，其中 schema.org 为数据提供词汇，JSON-LD 构成数据的格式和传输方式；
- 自定义元素代表可配置且与数据本身分离的呈现层。
示例
我们来看下面这个示例：一个列出了几个 Google 办公地点的页面： https://github.com/googlearchive/structured-data-web-components/tree/master/demo
该 widget 包含两个 widget：一个显示每个办事处图钉的地图，以及一个包含营业地点列表的下拉菜单。请务必确保这两个 widget 向用户显示相同的数据，并且网页对搜索引擎可读。
在此演示中，我们使用 LocalBusiness 实体来表达数据的含义，即部分 Google 办公室的地理位置。
如需检查 Google 如何读取和编入索引此网页，最好的方法是使用经过改进的结构化数据测试工具。在提取网址部分提交该演示的网址，然后点击提取并验证。右侧部分会显示从网页检索到的解析数据以及可能发生的任何错误。这是一种非常便捷的方式，可用于检查您的 JSON-LD 标记是否正确且可供 Google 处理。
您可以参阅网站站长中心博文，详细了解此工具及其带来的改进。
将组件关联到结构化数据来源
该演示的代码以及用于构建演示的网络组件的代码位于 GitHub 上。我们来看看 combined-demo.html 页面的源代码。
首先，我们使用 JSON-LD 脚本将数据嵌入到网页中：
<script type="application/ld+json">
{...}
</script>
这样，我们可以确保支持 schema.org 标准和 JSON-LD 格式的其他使用方（例如搜索引擎）能够轻松访问这些数据。
第二步，我们使用两个 Web 组件来显示数据：
- address-dropdown-jsonld - 此元素会创建一个下拉菜单，其中包含通过“jsonld”属性传入的所有位置。
- google-map-jsonld - 此元素会针对通过“jsonld”属性传递的每个位置创建带有图钉的 Google 地图。
为此，我们使用 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 的 Web 组件提供有意义且一致的输入。
- 搜索引擎可以高效地使用这些数据，从而改善网页索引编制效果，并可能导致丰富网页摘要显示在搜索结果中。
- 如果您以这种方式编写网络组件，则无需学习组件所需的数据或设计新的结构（和文档），因为 schema.org 已经为您完成所有繁重工作并建立共识。这还可以让您更轻松地构建由兼容组件组成的整个生态系统。
总而言之，JSON-LD 和 schema.org 与网络组件技术相结合，能够构建可重复使用的封装界面片段，方便开发者和搜索引擎使用。
创建自己的组件
您可以试用 GitHub 上的示例，或阅读 Polymer 关于创建可重复使用的组件的指南，开始编写自己的组件。 查看 developers.google.com 上的结构化数据文档，获取可以使用 JSON-LD 标记的各种实体的灵感。
欢迎通过 @polymer 与我们联系，向我们展示您构建的自定义元素！