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.
Related
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.
I developed an application with angular 4 for security reason and changing the template without compiling I am trying to find a way can change HTML and application use that. somehow I need to read HTML template files from an external folder and use that.
I tried to find a way, but unfortunately I could not get a direct answer I hope here I can found out is it any solution for that or not?
what I did are:
https://github.com/lacolaco/ng-dynamic
Load Angular2 template from external URL
Equivalent of $compile in Angular 2
Angular 4 Template Binding with ES6 Template String
Dynamically load HTML template in angular2
How to bind raw html in Angular2
Previously Angular were shipping angular-compiler in build (bundle js) for security reason they removed angular-compiler from bundle and reason is obvious that angular compiles code on build and there is no need to ship compiler. It creates extra overhead on your production site and also creates heavier bundle. So the answer is no. You cannot inject template from external source. Why not create a component and use condition to show your external html in this way?
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.
I am trying to package my Polymer web app as a Chrome Packaged App, but I am running into some issues surrounding Chrome's Content Security Policy (CSP). I am vulcanizing the app (with the --csp option) before packaging it, which works great for the JavaScript portion, but fails to extract the CSS inlined in Polymer's elements. Is there any way to either 1) override the CSP for Polymer's CSS or 2) extract the CSS and place it in a separate file for all Polymer elements?
As far as I can tell, there is a PR in the works to resolve this issue, but it hasn't been updated since August: https://github.com/Polymer/vulcanize/pull/33.
You can use gulp-cssmin to concatenate your css extracted from inline htmls with vulcanize --csp option.
See example of clean-css in Github page:
type one.css two.css three.css | cleancss -o merged-and-minified.css
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