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
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 a created a web component, let's call it a-1.html, this is the main web component that I would like to publish, but this component also depends on another component that I created, b-2.html, and b-2.html also depends on a third component that I created c-3.html.
I have followed Polymer's Create reusable elements guide in order to publish my element on GitHub, everything worked fine in terms of development (they were already developed), and I made the documentation, and I published on GitHub, but I'm facing 1 problem.
The guide deals as if you have a single component to be published, and it mentions that if there's any dependencies, I should place them, but what if my dependencies are still local dependencies? I can't put b-2.html and c-3.html in bower.json, because they are not yet online.
So later on, when I'm installing my element using bower install <username>/element, the element is not working because it's missing b-2.html and c-3.html, also the online demo (Github page using gp.sh) is not working.
For this situation, where should I place these files in order to have a complete working repo on GitHub, and also a working demo.
Directory:
bower_components
--- lots of compoenents
--- including b-2 and c-3 added manually by me
---- in order for the demo to work locally, but since they
----- aren't in bower.json, this won't work eventually
bower.json
demo
---index.html
index.html
README.md
test
---basic-test.html
---index.html
a-1.html
THANKS!
Publishing multiple elements in a GitHub repository is exactly the same as publishing a single one. The b-2.html and c-3.html elements in your case should be placed besides a-1.html in the directory:
bower.json
a-1.html
b-2.html
c-3.html
Unless specified in an ignore section of the bower.json file, these should be installed by bower.
In my point of view, the main section of the bower.json file is here subtle. Multiple elements should be considered as individual which could be used independently. Here could be a main section for your situation:
"main": [
"a-1.html",
"b-2.html",
"c-3.html"
]
However, if you wish to document your elements with an iron-component-page component, according to the Polymer 1.0 documentation all elements should be imported in a single html page. The recommended way of setting up the components would be a subdirectory for each component in order to write a demo page per component. I did that in a personal project including several elements to define an UML model: polymeria-uml.
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 seem to be missing something when it comes to applying themes to my polymer app. I started with a theme.css from polymerthemes.com and a test app. All worked well.
Then I started breaking it up into separate polymer elements and brining in some of my existing elements (built from paper and core elements). The styling stopped working as it hit the shadow dom boundary.
To fix it, I put body /deep/ in front of every style in themes.css!!
Works but I can't imagine that is the way this is supposed to work.
I had a look at core-style and that looks like exactly what is needed, but none of the core and paper elements seem to use it. Am I missing something or is this still very much a work in progress?
It would be great if we could get to a point where instead of downloading a theme.css and putting body /deep/ everywhere, that we could simply add a bower (or pub) dependency on a theme and it would work out of the box. Is this realistic?
I'm part of the team behind polymerthemes.com.
Your solution should work fine, however we'll be releasing an update shortly with the default CSS download piercing all shadow boundaries.
Bower integration is coming too (it's been a highly requested feature), stay tuned.
EDIT: All themes on polymerthemes.com now pierce all shadow boundaries.
We've also added support for bower, basic usage:
bower install polymer-themes
or to add as a dependency to your app's bower.json file:
bower install --save polymer-themes