我正在尝试 polymer 教程，这在 polymer 0.5.4 中运行良好，但不适用于 polymer 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，它就可以工作。知道为什么这不起作用吗？
最佳答案
从 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 中的所有更改，因为它一直在变化。
请参阅 Google 提供的此文档，了解有关 Polymer 0.8 的更多信息:
https://www.polymer-project.org/0.8/docs/migration.html
关于javascript - Polymer 0.8 抛出错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29588051/