polymer not working or displaying no elements

问题

Trying to display hello world using elements but nothing happens any help?

index.html

<!DOCTYPE html>
<html>
	<head>
	<meta name="viewport"
    content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

  <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
		<link rel="import" href="elements/hello-world.html">
	</head>	
<body unresolved>
<hello-world></hello-world>
</body>
</html>

hello-world.html

<link rel="import" href="../bower_components/polymer/polymer.html">

<polymer-element name="hello-world" nonscript>
	<template>
			<h2>Hello World</h2>
	</template>
</polymer-element>

回答1:

Code for "hello-world.html" is now:

  <link rel="import" href="../bower_components/polymer/polymer.html">
 <dom-module id="hello-world">
 <template>
 <h1>Hello World</h1> 
</template>
 <script>
 Polymer ({ is: "hello-world", }); 
</script>
 </dom-module>

回答2:

If you are using polymer version 0.8 or 0.9, then <polymer-element ... should be <dom-module ...

See more from polymer site:

https://www.polymer-project.org/0.9/docs/start/quick-tour.html

回答3:

You have a typo, nonscript needs to be noscript.

<polymer-element name="hello-world" noscript>

回答4:

I have the same problem and dont find the mistake.

index.html

<html>
    <head>
        <title>Polymer-Application</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--<script src="bower_components/jquery/dist/jquery.min.js"></script>-->
        <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
        <!-- file is available, auto completed by api -->

        <link rel="import" href="hello/hello.html">
        <!-- file is available, auto completed by api -->
        <!-- netbeans doesn't know relation import -->
    </head>
    <body>
        <h1>My first Polymer-Application</h1>
        <hello></hello>
    </body>
</html>

hello/hello.html

<link rel="import" href="../bower_components/polymer/polymer.html">
<!-- file is available, auto complete by api -->
<polymer-element name="hello" noscript>
    <template>
        <h1>Hello Polymer world</h1>
    </template>
</polymer-element>

My platfrom is:

Win 8.1
nodejs
bower
polymer (installed over bower, folders and files are availible)
git
netbeans dev edition (as editor)
xammp (as apache webserver)

tested with chrome, firefox and ie10 and the custom element is not be shown. i don't think it's a browser problem. it's the simpliest element you can write, but why did it not work?

Edit:

tested it on a clean ubuntu installation. and it still does not work? i also tested original code from the polymer page and this won't work too. am i to stupid for copy paste?

Edit 2:

i found it an have running my polymer apps. If i use Polymer 1.0.9 i should not read the tutorial for 0.5.0

changes:

index.html:

<!DOCTYPE html>
<html>
  <head>
    ...
    <script scr="bower_components/webcomponents-lite.min.js"></script>
    <!-- the lite edition is needet since polymer version 0.8 -->
    <link rel="import" href="hello/hello.html">
    ...
  </head>
  <body>
    <hello></hello>
  </body>
</html>

hello/hello.html:

<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="hello">
  <!-- its not longer a polymer-element. we have to use dom-module and id and the noscript option is not longer supported -->
  <template>
  <template>
  <script>
    // everytime you need to initialize a Polymer object
    Polymer({
      is: 'hello' // must be set now
    });
  </script>
</dom-module>

if you want to work with parameters you need to set it in the polymer ready function and every placeholder must be surrounded by a html tag like span without any other content in it.

回答5:

Replace the line

<script src="bower_components/webcomponentsjs/webcomponents.js"></script>

with

<script src="../bower_components/webcomponentsjs/webcomponents.js"></script>

This should fix the issue.

来源：https://stackoverflow.com/questions/30277272/polymer-not-working-or-displaying-no-elements

标签

polymer

elements