聚合物 0.8 引发错误答案

【问题标题】：Polymer 0.8 throws error聚合物 0.8 引发错误
【发布时间】：2015-04-12 18:08:58
【问题描述】：

我正在尝试聚合物教程，这在聚合物 0.5.4 中运行良好，但不适用于聚合物 0.8

index.html

<!doctype html>
<html>
 <head>
  <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
  <link rel="import" href="post-card.html">
  <style>
   html,body {
    height: 100%;
    margin: 0;
    background-color: #E5E5E5;
   }
  </style>
 </head>
 <body unresolved>
      <post-card>
        <img width="70" height="70"
          src="../images/avatar-07.svg">
        <h2>Another Developer</h2>
        <p>I'm composing with shadow DOM!</p>
      </post-card>
 </body>
</html>

和 post-card.html

<link rel="import" href="bower_components/polymer/polymer.html">
<polymer-element name="post-card">
  <template>
    <style>
    :host {
      display: block;
      position: relative;
      background-color: white;
      padding: 20px;
      width: 100%;
      font-size: 1.2rem;
      font-weight: 300;
    }
    .card-header {
      margin-bottom: 10px;
    }
    polyfill-next-selector { content: '.card-header h2'; }
    .card-header ::content h2 {
      margin: 0;
      font-size: 1.8rem;
      font-weight: 300;
    }
    polyfill-next-selector { content: '.card-header img'; }
    .card-header ::content img {
      width: 70px;
      border-radius: 50%;
      margin: 10px;
    }

    </style>

    <!-- CARD CONTENTS GO HERE -->
    <div class="card-header" layout horizontal center>
      <content select="img"></content>
      <content select="h2"></content>
    </div>
    <content></content>
  </template>
  <script>
  Polymer({});
  </script>
</polymer-element>

如果我从 0.8.0 更改为 0.5.4，在 bower.json 中它可以工作。知道为什么这不起作用吗？

【问题讨论】：

标签： javascript polymer web-component

【解决方案1】：

从 Polymer 0.5 到 Polymer 0.8 发生了很多变化，0.5 中存在的几乎所有 api 都不适用于 0.8。

重写源代码的最佳方法是：

index.html 不需要改变

但是 post-card.html 需要修改：

<dom-module id="post-card">
  <style>
    :host {
      display: block;
      position: relative;
      background-color: white;
      padding: 20px;
      width: 100%;
      font-size: 1.2rem;
      font-weight: 300;
    }
    .card-header {
      margin-bottom: 10px;
    }
    polyfill-next-selector { content: '.card-header h2'; }
    .card-header ::content h2 {
      margin: 0;
      font-size: 1.8rem;
      font-weight: 300;
    }
    polyfill-next-selector { content: '.card-header img'; }
    .card-header ::content img {
      width: 70px;
      border-radius: 50%;
      margin: 10px;
    }

    </style>
  <template>
    <div class="card-header" layout horizontal center>
      <content select="img"></content>
      <content select="h2"></content>
    </div>
  </template>
</dom-module>

<script>
  Polymer({is: "post-card"});
</script>

在 Polymer 的这个 alpha 版本中发生了很多变化：

Polymer 0.8 中的所有变化都一一提及是不可行的，因为它一直在变化。

有关 Polymer 0.8 的更多信息，请参阅 Google 的此文档：
https://www.polymer-project.org/0.8/docs/migration.html

【讨论】：