gpt4 book ai didi

polymer 示例代码在 Firefox 中不起作用

转载 作者:行者123 更新时间:2023-12-05 00:16:07 26 4
gpt4 key购买 nike

我正在尝试 Google 在 https://www.polymer-project.org/1.0/start/first-element/intro 提供的示例代码.

这是我到目前为止:

索引.html:

<!DOCTYPE html>                                                                                                          
<html lang="en">
<head>
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.js"></script>
<link href="/my_components/icon-toggle-demo.html" rel="import">
</head>
<body>
<icon-toggle-demo toggle-icon="star"></icon-toggle-demo>
</body>
</html>

图标切换演示.html:
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">                                              
<link rel="import" href="https://polygit.org/components/iron-icons/iron-icons.html">
<link rel="import" href="icon-toggle.html">


<dom-module id="icon-toggle-demo">
<template>
<style>
:host {
font-family: sans-serif;
};
</style>

<h3>Statically-configured icon-toggles</h3>

<icon-toggle toggle-icon="star"></icon-toggle>
<icon-toggle toggle-icon="star" pressed></icon-toggle>

<h3>Data-bound icon-toggle</h3>

<!-- use a computed binding to generate the message -->
<div><span>[[message(isFav)]]</span></div>

<!-- curly brackets ({{}}} allow two-way binding -->
<icon-toggle toggle-icon="favorite" pressed="{{isFav}}"></icon-toggle>
</template>

<script>
Polymer({
is: "icon-toggle-demo",
message: function(fav) {
if (fav) {
return "You really like me!";
} else {
return "Do you like me?";
}
}
});
</script>
</dom-module>

图标-toggle.html:
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">                                              
<link rel="import" href="https://polygit.org/components/iron-icon/iron-icon.html">

<dom-module id="icon-toggle">

<template>

<style>
/* local DOM styles go here */
:host {
display: inline-block;
}

iron-icon {
fill: rgba(0,0,0,0);
stroke: currentcolor;
}
:host([pressed]) iron-icon {
fill: currentcolor;
}

</style>

<!-- local DOM goes here -->
<!-- <span>Not much here yet.</span> -->
<!-- <iron-icon icon="polymer"> -->
<iron-icon icon="[[toggleIcon]]">
</iron-icon>
</template>

<script>
Polymer({
is: 'icon-toggle',
properties: {
toggleIcon: String,
pressed: {
type: Boolean,
value: false,
notify: true,
reflectToAttribute: true
}
},
listeners: {
'tap': 'toggle'
},
toggle: function() {
this.pressed = !this.pressed;
}
});
</script>

</dom-module>

该代码在 chrome 中运行良好,但在 FF 中出现以下错误:
TypeError: document.registerElement is not a function

我已经包含了 polyfill。还缺什么?

最佳答案

你没有做错任何事。您的 index.html 中的以下行文件默认为 webcomponents polyfill 的最新版本 (v1.0.0-rc.1)。

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.js"></script>

Firefox 的当前版本中似乎存在错误。在 Polymer 文档 here 中链接的 Plunker 中也可以观察到相同的错误。 .这有望由 Polymer 团队解决。

要暂时修复它,您可以明确使用旧版本。例如。
<script src="https://cdn.rawgit.com/webcomponents/webcomponentsjs/v0.7.24/webcomponents-lite.js"></script>

关于 polymer 示例代码在 Firefox 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42526642/

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