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>

bower.json中的

如果我从0.8.0变为0.5.4就可以了。知道为什么这不起作用吗？

Answer 1

许多事情已经从聚合物0.5变为聚合物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引发错误

1 个答案: