gpt4 book ai didi

javascript - Polymer 0.8 抛出错误

转载 作者:行者123 更新时间:2023-12-03 10:21:57 25 4
gpt4 key购买 nike

我正在尝试 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com