Why does Safari/Firefox not recognise Polymer
Question
I'm experimenting with Polymer-2/webcomponents, and completed successfully this tutorial. In addition I added a trial file, which loads & displays in Chrome (without proper nesting, though) but does not show at all in Safari (10.0.3) and Firefox (52.02), I see an Reference error: can't find variable Polymer all dependencies seem to be available under bower_components and when I enter Polymer in FF and Safari's console, Polymer seems te be defined, so it might be a timing issue? What more can be wrong?
<!doctype html>
<html lang="en">
<head>
<script>
window.ShadyDOM = { force: true };
</script>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
</head>
<body>
<dom-module id="my-foo">
<template>
<h1>
<slot></slot>
</h1>
</template>
<script>
Polymer({ is: 'my-foo' });
</script>
</dom-module>
<dom-module id="my-bar">
<template>
<i>
<slot></slot>
</i>
</template>
<script>
Polymer({ is: 'my-bar' });
</script>
</dom-module>
<my-foo>
<my-bar>Hello world!</my-bar>
</my-foo>
</body>
</html>
2 answers
solution1
0 2017-04-17 16:44:04
Try to add:
<!-- Load webcomponents-loader.js to check and load any polyfills your browser needs -->
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
solution2
0 2017-04-18 18:38:59
如果将文档模板移动到单独的文件中，然后link rel=import href..到该文件，则效果很好。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.