CODEWITHSUNDEEP
polymer
Joe
Joe

Reputation: 7004

First steps with Polymer, elements not displaying correctly (in Plunker!)

I'm just starting with web development, and I'm trying to use some polymer elements:

http://embed.plnkr.co/o4OKkE/

I'm kind of half managing the import. The elements display (in some manner). The paper element works well, apart from the margins. The button is good, the paper-input completely fails, same with tabs. The text/formatting is all default. Does polymer dictate the font etc, or is it managed using CSS separately?

I think I'm not attaching the theme correctly. Can anyone point out the errors?

Edit: Thanks to Neil John Ramal, I've got the basics working without any errors:

http://run.plnkr.co/AD3ETQOsMwajnSBt/

I just can't seem to get the elements to import using polygit, just rawgit.

This here:

works fine. However this produces an error:

Redirect at origin 'http://polygit.org' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://run.plnkr.co' is therefore not allowed access.

Presumably because Plunker is not allowing redirects and that's how polygit works. How it functions with polymer.html I'm not sure...

Upvotes: 0

Views: 105

Answers (1)

Neil John Ramal
Neil John Ramal

Reputation: 3734

You are mixing up your imports. You have to make sure you are importing your components from a single source so no variable/name clashing would occur. On your example, you are importing both from your own repository and polygit's.

Evidence is on the error logs:

VM199 polymer-micro.html:363 Uncaught NotSupportedError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'dom-module'. A type with that name is already registered.

This just means that you have imported polymer.html more than once and from different sources. HTML imports only dedupe if they came from the same source.

Also at your index.html:

<script data-require="polymer@*" data-semver="1.0.0" src="http://polygit.org/components/polymer/polymer.html"></script>

Should be:

<link rel="import" src="//polygit.org/components/polymer/polymer.html">

Upvotes: 1

Related Questions