I am trying to call a function on the click of paper-button in my polymer application.
But polymer throws error there:
I searched for the same error I found that we should import polymer.html.
I have also imported polymer.html in my index file, but still, it's failing:
I am not getting what I did wrong.
You're not loading the polyfills correctly. They are not HTML files to be loaded with HTML imports, you need to load them with a <script> tag:
<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
Note: HTML Imports have been removed from Chrome, so every browser requires the polyfill now. I'd switch to Polymer 3.x as soon as you can. From there you can upgrade to LitElement incrementally.
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.
I have setup the cross browser extension boilerplate
https://github.com/EmailThis/extension-boilerplate
I want to be able to load html content inside my javascript code example
import contentTemplate from "../content.html";
I have found some plugins but they all work with webpack,
how can I do the above without webpack ?
I have done that with the following plugin
https://www.npmjs.com/package/babel-plugin-transform-html-import-to-string
I have been searching the forum for answers and similar posts, but none have helped me resolve my issue.
I am working on a standalone project - no server involved. And am trying to load a html file present inside a jar file into a JavaFX Webview using a code similar to the following
webView.getEngine()
.load(this.getClass().getResource("htmlInsideJar.html").toExternalForm());
The page loads into the webView, but the associated JS and CSS files are not loading into the HTML page.
However the HTML page loads just fine with all associated css and js files when loaded directly from disk
webView.getEngine()
.load("htmlFromDiskDirectly.html").toString());
I am using same file-folder structure for files with html, css and js contents.
The java version that I am using is as follows
java version "1.8.0_121"
Java(TM) SE Runtime Environment (build 1.8.0_121-b13)
Java HotSpot(TM) Client VM (build 25.121-b13, mixed mode)
Any help would be deeply appreciated please.
Thanks
I failed to get a solution, so i resorted to having the assets folder outside the jar.
// i set the html base tag with this
String BASE_URL = Paths.get("").toUri().toString();
String pageContent = ReadFileToString.read("page.html").replace("{BASE_URL}", BASE_URL);
in the html file i have something like this
<base href="{BASE_URL}">
<link rel="stylesheet" href="assets/style.css">
NB. the ReadFileToString.read() is just a custom util that reads a html file and returns it in string format.
I have found a fix to this issue. I am using requireJs to load my scripts into the html page. While the page loaded perfectly fine in
IE
firefox
chrome
and even in eclipse's inbuilt web browser
the JavaFX web engine precisely caught few errors where I had mis-spelt a file dependency in a require statement.
I had used some thing like require(['../abcModule/FileDependecy'] .... instead of require(['../abcModule/fileDependecy']. Changing a couple of such stuffs fixed the issue and the page loaded successfully. Had to spend 3 + hours to find a fix for it. grrr –
Thanks to fire-bug lite. Though it does not load neatly inside the JavaFx webview, I was able to mine the error info from the coarse data that appeared to get the issue fixed.
Hope this helps some one
I'm new to Polymer and one of the things I like is that I can declare global CSS styling and Javascript libraries in the elements.html file. However, in the demos I have seen elements.html has been reserved exclusively for importing Polymer templates.
Is it bad style to overload elements.html with CSS and JS imports?
No, there is nothing wrong about including JS and CSS files in the elements.html.
Think of elements.html as a non-ui web-component.
There is just one important thing to remember:
Polymer team has created a tool called Vulcanize which takes a file like elements.html which imports all the custom elements, to knit them together into a single file for reducing the number http requests the browser makes to gather the required resources. Adding JS and CSS files here will get this tool confused and generated rather odd results.
So this is exactly why you don't see official examples and tutorials include JS and CSS files in the elements.html.
More about Vulcanize:
https://github.com/Polymer/vulcanize
https://www.polymer-project.org/0.5/articles/concatenating-web-components.html
Hope my writing is clear.
Does Polymer and/or native Web Components use ES6's SystemJS modules technology?
https://github.com/systemjs/systemjs
Or do they rely on their own asset management?
Existing Web Components don't really use SystemJS but it's now possible to use it with systemjs-plugin-html to load HTML imports and circumvent the issues they have. SystemJS can redirect paths so that for example the same library expected in different locations can be redirected to the same file, and components can be more freely placed in different directories. Of course, this doesn't fix paths in the <link rel="import"> tags of existing components but new components can be created without them, while still more flexibly re-using existing components.
I've written an article with downloadable code and a working demo for how to use Polymer with SystemJS and TypeScript.
The Web Components specification is a set of four other specifications where one is about the HTML Imports technology. Web Components do not solve any module issues at a first glance. However, HTML Imports are the key to import components from anywhere into your app.
If you have componentA that imports a componentB and you import componentA into your web app, componentB is first imported and then componentA. So you kind of setup an implicit dependency tree that is resolved by HTML Imports automatically (which is why HTML Imports work asynchronously).
In short: no. They use HTML Imports to manage components.
No. In fact SystemJS modules are not support in browser yet. Currently polymer and x-tag use HTML import to load web component, but Mozilla rollback the HTML import support in nightly build and want to seek for SystemJS instead. (Eventually HTML import might duplicate once SystemJS is supported in browser).
In Firefox OS they just import web component as normal js library and not use HTML import.
ex: gaia-switch element
https://github.com/gaia-components/gaia-switch