随着 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 处理。
您可以参阅网站站长中心的博文，详细了解该工具及其带来的改进。
将组件关联到结构化数据源
演示和用于构建演示的 Web 组件的代码位于 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 回调中执行此操作（该回调会在组件准备就绪时触发）。由于这些元素可以通过属性进行配置，因此只需将 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 组件提供有意义且一致的输入。
- 搜索引擎可以高效使用这些数据，从而改进网页的索引编制，并可能在搜索结果中显示富媒体摘要。
- 如果您以这种方式编写 Web 组件，则无需为组件预期的数据学习或设计新的结构（和文档）- schema.org 已为您完成所有繁重工作并达成共识。这还可以让您更轻松地构建由兼容组件组成的整个生态系统。
总而言之，JSON-LD 和 schema.org 与 Web 组件技术相结合，可让您构建可重复使用的封装界面部分，这些部分对开发者和搜索引擎都很友好。
创建您自己的组件
您可以试用 GitHub 上的示例，或阅读 Polymer 关于创建可重复使用的组件的指南，开始编写自己的组件。 请参阅 developers.google.com 上的结构化数据文档，了解您可以使用 JSON-LD 标记的各种实体。
欢迎通过 @polymer 与我们联系，向我们展示您构建的自定义元素！