Following is the code, with paper-input in body but it ceases to render.
I was able to render paper-button though.
<script src="../components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../components/paper-input/paper-input.html">
<body unresolved>
<paper-input label="India"></paper-input>
</body>
I know you have probably resolved your issue by now, hopefully but for others who may run into the same issue, try adding this inside your head tag:
<link rel="import" href="bower_components/paper-input/paper-input.html">
It looks like you did not import paper-input correctly.
Had the same issue and then found out I had paper-input v1.2
I reinstalled it and it changed to 2.x, then it started working.
Related
I created a new polymer app using AppToolbox (polymer cli) and now I'm trying to add a theme that I download from Polymer Theme. I follow the instructions:
Add the following line inside your tag
AFTER the webcomponents-lite.min.js and other HTML imports.
<link rel="import" href="path/to/theme.html">
To use the theme within your custom element, add the following line
inside your tag:
<link rel="import" href="path/to/theme.css" type="css">
Of course I removed some css styles in the example components but I don't see the template applied to the project.
Could anyone give me some advice about this?
Instructions:
TL;DR The only method that seems to allow those themes to work properly with Polymer 1.5.0 is to link the provided stylesheet in index.html with:
<link rel="stylesheet" href="path/to/theme.css">
plunker
The instructions from https://polymerthemes.com/ to import the CSS theme in your <dom-module> align with Polymer's documentation on importing external stylesheets, but the support for that import-type is deprecated in favor of style modules.
However, even style modules don't allow full theming in my experiments.
Trials:
Importing the provided theme in the <dom-module> (deprecated):
<dom-module id="x-button">
<link rel="import" type="css" href="theme.css"> <!-- partial styling -->
...
</dom-module>
Result: Styles are restricted to the custom element, but no font styling. plunker
Converting the provided theme into a style module, and including it in the <dom-module>:
<link rel="import" href="theme.html">
<dom-module id="x-button">
<style is="custom-style" include="theme"></style> <!-- partial styling -->
...
</dom-module>
Result: (same effect as Trial 1) plunker
Linking the provided stylesheet in <dom-module>:
<dom-module id="x-button">
<link rel="stylesheet" href="theme.css"> <!-- full styling, leaks -->
...
</dom-module>
Result: x-button fully styled as intended, but styles leak into main page, modifying the background color and a paper-button of the main page. plunker
Linking the provided stylesheet only in index.html:
<head>
<link rel="stylesheet" href="theme.css"> <!-- full styling -->
...
</head>
<body>
<x-button></x-button>
</body>
Result: x-button fully styled as intended. plunker
I've been playing with Polymer. I've successfully built a "hello world" app. My app includes the iron-elements. I'm now trying to integrate the paper-elements. Unfortunately, I can't seem to get them to work in my project.
I installed them via bower install PolymerElements/paper-elements. I then imported the .html similar to the way I did for the iron elements. However, the items didn't appear. So, I decided to take a step back and just do a "hello world" with the paper elements. To my surprise, I couldn't figure out how to just display a Button with Paper. Surely I'm not this dumb.
I sought out a basic app I could pull from GitHub and use. However, I didn't have any luck doing that either. Currently, I have the following:
<html>
<head>
<title>Hello</title>
<script src="res/packages/webcomponentsjs/webcomponents-lite.min.js"></script>
<!-- Polymer -->
<link rel="import" href="res/packages/polymer/polymer.html">
<!-- Paper Elements -->
<link rel="import" href="res/packages/font-roboto/roboto.html">
<link rel="import" href="res/packages/paper-header-panel/paper-header-panel.html">
<link rel="import" href="res/packages/paper-toolbar/paper-toolbar.html">
<link rel="import" href="res/packages/paper-button/paper-button.html">
<!-- End of Paper Elements -->
<!-- End of Polymer -->
</head>
<body unresolved>
<h1>Hello</h1>
<paper-header-panel>
<paper-button raisedButton label="button"></paper-button>
</paper-header-panel>
</body>
</html>
what am I doing wrong? Can someone either tell me what I'm missing or point me to a basic "hello world" app with Paper?
Thank you!
Remove your paper-header-panel and try this:
<paper-button raised>Raised button</paper-button>
I'm updating a little Polymer element to 1.x. It works fine in Chrome and Safari, but in the latest Firefox I get several "uncaught exception: Element name could not be inferred." errors.
Seems to be related to the html imports, because if I remove everything from the component.html except for the imports, then the errors still occur.
In the index.html I have this:
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="src/element.html">
In the element.html this:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-input/iron-input.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
[EDIT] - Somehow the errors disappeared. I suspect due to either a Firefox or Polymer update.
Clear your browser cache to solve the problem.
install polymer#^1.1.0 which resolved to 1.7.0
it works for me
Hi all I am trying to create a custom Polymer Element that uses the < x-flipbox > element inside its template tag.
However it seems that the < x-flipbox > tag it is only working on the index page and not inside my custom elements.
This is my custom element, what am I doing wrong?
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/x-tag-imports/x-tag-flipbox.html">
<polymer-element name="nautes-flipbox" attributes="">
<template>
<style>
:host {
display: block;
}
</style>
<x-flipbox>
<div>I'm the front face.</div>
<div>I'm the back face.</div>
</x-flipbox>
</template>
<script>
Polymer({
});
</script>
</polymer-element>
The element above is just showing the two divs.
<x-flipbox>
<div>I'm the front face.</div>
<div>I'm the back face.</div>
</x-flipbox>
This one pasted in the index.html shows only one div (as it should).
In addition, how can I debug this kind of issues? (I am new to polymer and the console is not giving me any error/warning)
You don't need to include it as a import, that's an old wrapper thing the Polymer folks wrote for including X-Tag elements (it's probably what's complicating this). You can simply include the JS (as a <script>) and CSS (as a <link rel="stylesheet">) inside of the x-flipbox repo's src directory where you have your <link rel="import"> for the flipbox
Repo: https://github.com/x-tag/flipbox/tree/master/src
I would like to know if there are any CDNs for polymer elements, since you have to always download the elements and It would be more convinient to import it via cdn. Can't find any on google? Also are there any reasons that it does not exists or just because it is so new?
There is now!
I created this GitHub repository specifically for this purpose:
download/polymer-cdn
All GitHub repositories are automatically in CDN through RawGit. So, using that, we can now import Polymer elements using markup like this (for iron-icons in this case):
<link rel="import"
href="https://cdn.rawgit.com/download/polymer-cdn/1.0.1/lib/iron-icons/iron-icons.html">
The project structure was set up in such a way that imports from elements that you import (transitive dependencies) resolve correctly.
The readme for the repository has a list of all elements it contains.
Missing something? Let me know and I'll be happy to include it.
Try it
You can try it out right now by hacking on this Codepen:
Polymer-CDN Example.
Or you can run this code snippet:
<base href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="iron-icon/iron-icon.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-checkbox/paper-checkbox.html">
<link rel="import" href="paper-tabs/paper-tabs.html">
<link rel="import" href="paper-toggle-button/paper-toggle-button.html">
<style is="custom-style">
:root {
--paper-tabs-selection-bar-color: var(--paper-light-blue-900);
--paper-tab-ink: var(--paper-light-blue-100);
--paper-tabs: {
color: white;
background-color: var(--paper-light-blue-500);
};
}
</style>
<div>
<paper-button raised><iron-icon icon="check"></iron-icon>OK</paper-button>
<paper-button raised><iron-icon icon="clear"></iron-icon>Cancel</paper-button>
</div>
<p><paper-checkbox>Checkbox</paper-checkbox></p>
<p><paper-toggle-button></paper-toggle-button></p>
<paper-tabs selected="0">
<paper-tab>TAB 1</paper-tab>
<paper-tab>TAB 2</paper-tab>
<paper-tab>TAB 3</paper-tab>
</paper-tabs>
You can also access polymer elements directly from polymer-project.org.
Example:
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-ajax/core-ajax.html">
This is an old question, but there is a non-hacky solution now: http://polygit.org/
It uses rawgit behind the curtains but provides a much nicer api.
I do not know any CDN hosting polymer elements right now and I assume it would be better to vulcanize them for a production environment but due to the fact that most of the elements are hosted on github you could link your imports to rawgit.com
Example:
<link rel="import" href="https://rawgit.com/Polymer/core-ajax/master/core-ajax.html">
You might take a look at cloudflares polymer CDN:
http://cdnjs.com/libraries/polymer
rawgit option
You would have to manage some dependencies manually since core-ajax.html returns 404 on polymer.html. Also rawgit.com cache is set to only 5 min (cache-control:max-age=300). 5 min cache is fine for version control, but it should be more for CDN (https://rawgit.com/Polymer/core-ajax/0.4.1/core-xhr.html). Also files are not minified.
vulcanize option
Probably best option before http/2 release. You would have to spend some time with configuration and integration into your build process. Also you don't have any CDN benefits (no data cost, already cached resources from third party domains.)
conclusion
There will be some CDN with minified polymer versions and long expires header on http/2 release. But I don't know about any right now.