聚合物 0.8 抛出错误

Question

我正在尝试聚合物教程，这在聚合物 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>

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

Answer 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

聚合物 0.8 抛出错误

Polymer 0.8 throws error

javascript

web-component

polymer