I have created a core-scaffold based element in the Polymer Designer.
Using the Polymer Generator with Yeoman, I created a basic app and it displayed the page as expected. https://github.com/yeoman/generator-polymer/
I want to use the output from the designer in my app. I renamed designer.html (from gist) to dashboard.html, changed
<polymer-element name="my-element"> to
<polymer-element name="dashboard">
saved the designer output as: app/elements/dashboard/dashboard.html
changed all of the imports to the correct path, e.g.
<link rel="import" href="../core-scaffold/core-scaffold.html"> to
<link rel="import" href="../../bower_components/core-scaffold/core-scaffold.html">
when I add
<link rel="import" href="dashboard/dashboard.html">
to elements.html and the page reloads, it is now blank. This is without changing anything in index.html
Hints as to what else needs to be changed in the designer output for it to be imported to this app?
The problem is that all Polymer elements MUST be hyphenated.
Related
I am working on modifying an existing project which is built in polymer 1.0.
As the current version of polymer is polymer 3.0 how can we include the same without making much changes with the existing application.
The main difference than i found out is that in polymer 1.0 .html files are imported whereas in polymer 3.0 .js files are imported.
Added below the comparison between two imports
polymer 1
<head>
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
</head>
polymer 3
import {PolymerElement, html} from '#polymer/polymer';
When we try to install components js files are being created. Is there any method to create old type polymer components via CLI?
I don't think you should try to create Polymer 3 elements in HTML files, as HTML imports are either not supported (in FF, for example), or about to become obsolete (in Chrome, for example), as you can see here.
A mix between components crated with Polymer 1.x/2.x (with HTML imports) and Polymer 3.x and/or LitElement would be to have an webpack build step, that would bundle all the JS files. (for example have a single JS file where you import your new elements, pass it throgh webpack and include it in your Polymer 1.x app).
But in the long run migrating away from HTML imports seems like the safer bet. You might want to take a look at the modulizer, as #HakanC suggested.
Newest progression:
It seems that I can exclude firebase from possible causes. Because I tested only with polymer deployment and got a bad result too.
My project uses Google Polymer and is deployed to firebase hosting. It needs to import some polymer html file from outside the firebase hosting.
So I changed the code from the following "local" to "outside". However "outside" does not work at all, where "local" means my local computer for testing or the firebase hosting.
Could you point out what is wrong in my code?
my-app.html has one of following links.
//"local: OK"
<link rel="import" href="some.html">
//"outside: not OK"
<link rel="import" href="https://outside.com/some.html">
And my-app.html uses the element, id="some", as
<template><some></some></template>
And "some.html" contains just one dom-module with the following simple template. Let me omitt writting other parts because they are minimum too.
<template><h1>test</h1></template>
In order for this to work, resources on other origins must be CORS-enabled (cross origin resource sharing) as this article states. The W3C draft on HTML imports also mentions it.
The link tag also has a crossorigin attribute, which may help here. E.g. <link rel="import" href="https://outside.com/some.html" crossorgin="anonymous">.
I was under the impression that if I vulcanized my index.html, it would extract and concatenate my html imports. Here's a snippet from my index:
<!doctype html>
<html unresolved>
<head>
<base href="/">
<script src="/assets/traceur-runtime.js"></script>
<script src="/bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="/bower_components/core-icon/core-icon.html">
<link rel="import" href="/bower_components/core-item/core-item.html">
<link rel="import" href="/bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="/bower_components/core-toolbar/core-toolbar.html">
and so forth. I am including just the polymer bits I need. I don't have any self-defined custom elements (I'm just assembling a UI from core- and paper- components).
I was under the impression that some combination of --inline and other flags would result in a very long index.html that no longer directly imported the bower_component files. I could be wrong about that, I suppose, but that's my goal. It's not that big of a deal; I am not even sure that the correct answer here is making my index.html huge in order to avoid 20 extra loads, especially with caching and all that. Still, there's no way to test this without having an inline version to test.
Edit:
I'm running vulcanize in the root of my built dist directory:
dist/
index.html
bower_components/
and it runs, I've tried with --inline and --csp and both, and it basically just spits index.html back out into vulcanized.html. If I do --strip, it strips whitespace, but that's it.
I have never tried to Vulcanize my Index.html, I always have an elements.html file which has all my imports and I finally import the elements.html in my Main file.
Whenever I try to Vulcanize my elements.html file it works as expected by concatenating all the Elements' definitions into one file for decreasing the number of http requests the browser has to make.
The problem might be that you are using the very latest version of Volcan which has been reworked on and the --csp feature has been moved to a standalone cli app by itself and the --strip has also be moved to the html-minifier app.
You might want to check that out.
https://github.com/PolymerLabs/crisper
https://github.com/kangax/html-minifier
Aha, I figured it out- I was using href="/bower_components/core-icon/core-icon.html" when I should have been using href="bower_components/core-icon/core-icon.html".
Note the lack of the leading slash. Now I just need to figure out how to wire it up so it can find bower_components properly.
Very frustrating, not sure what's going on. I can't find exactly what I need to import to get the paper-dropdown-menu menu to pop up like in the demo -- I've imported the same components that are in the demo, plus some, but to no avail. I've taken it in an entirely separate file and it's not working still. Any ideas?
<paper-dropdown-menu label="versions">
<paper-dropdown layered class="dropdown">
<core-menu class="menu">
<paper-item>version 1</paper-item>
<paper-item>version 2</paper-item>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
Can anyone tell me or point me to the page which states exactly which components I need to import? I can't seem to find it anywhere.. Any help would be appreciated! Thanks!
edit just ran the demo file on my appengine test server and it's not showing the overlayed menu either.. hmmmmm
edit my import statements:
<script type="text/javascript" href="/bower_components/webcomponentsjs/webcomponents.js'.
</script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-elements/paper-elements.html">
<link rel="import" href="bower_components/core-elements/core-elements.html">
edit I've tried re-downloading the 5.1 paper-dropdown-menu folder directly from Git, no dice. The demo.htmlincluded also doesn't run when I ran it on my test server
edit After importing the paper-dropdown-menu.html file separately from the paper-elements.html file the top-tier paper-dropdown appears to be working. I guess that the paper-dropdown-menu isn't included in the latest version of paper-elements.html? I'm back to my original issue of my overlay still not working, however. I'm not sure what element I need to import in order to get this to work. I was under the impression that it used the paper-dropdown-transition but I'm not sure, I can't seem to find it in the documentation anywhere. Halp!
I've solved my issue! I needed to have both of these imported in order to get it to appear!
<link rel="import" href="bower_components/web-animations-next/web-animations.html">
<link rel="import" href="bower_components/web-animations-js/web-animations.html">
I only had the web-animations-next imported previously. I wish I knew where this stuff was documented if anyone wants to post a link still!
Pretty sure paper item, not sure though. Give it a try.
Or, better yet, just import paper elements and get everything.
I'm having trouble getting polymer elements to show up on my parse app.
The file directory looks like this:
/cloud
/views
app.js
main.js
/config
global.json
/public
/components
/css
index.html
in index.html I have the imports like this:
<!-- css -->
<link type='text/css' rel="stylesheet" href="../css/main.css">
<!-- polymer -->
<link rel="import" href="../components/paper-tabs/paper-tabs.html">
and a paper button in the body:
<paper-button>PAPER BUTTON</paper-button>
However, when I deploy, the paper button doesn't show up. The css is applied correctly though, which is so weird, since if /public/index.html can access /css then why not /components??
To debug I moved the step-1 folder from the polymer tutorial into /public so that the file directory is like this:
/cloud
/views
app.js
main.js
/config
global.json
/public
/components
/css
/step-1
index.html
index.html
I've verified that when I run the app on localhost and go to
http://localhost:8000/public/step-1/
The polymer elements show up correctly. I'm unable to access this on the deployed parse app though, and I'm not sure how to set up routing correctly.
btw, app.js contains the default routing configurations:
app.set('views', 'cloud/views'); // Specify the folder to find templates
app.set('view engine', 'ejs'); // Set the template engine
app.use(express.bodyParser()); // Middleware for reading request body
I looked at the expressjs docs and tried adding
app.use(express.static(__dirname + '/bower_components'));
and installing polymer at the app's root directory and using corresponding imports, but it still doesn't work.
What am I missing?
LOL. Forgot the polymer js import and imported paper tabs instead of paper button.
Fixed:
<!-- polymer -->
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/paper-button/paper-button.html">
I have a similar issue, The samples what polymer has given they run correctly on python http server.