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">.
Related
I'm developing my app from the backend side. My page is supposed load the css locally. I'm using nodejs, express.js, and ejs(for my pages) - The MEN/MEAN stack.
<link href="../public/stylesheets/style.css" rel="stylesheet" type="text/css">
I'm 100% sure the link is correct since VS Code allows you the check, but I've gotten an error when loading the page up. The error: "The resource from “http://localhost:3000/public/stylesheets/style.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)"
The CSS works fine when I use the style tag instead. What's going on here?
Okay so I solved it. The issue is with Express, it changes the "text/css" part to "text/html". A quick easy workaround would be to remove the "rel=stylesheet" but that can produce mixed results. The best thing is to use app.use(express.static("public")) - this will let express know that the public folder is for styles and scripts.
The link now should look like <link href="stylesheets/style.css" rel="stylesheet" type="text/css"> and it will work.
You should tell express that you have a static assets that you parked all on public folder.
app.use(express.static("public"))
To know more express magic, follow this github repo.
https://github.com/sagormax/node-admin/
so I'm trying to write a simple hello world page using Polymer. The problem I'm having is whenever I run the #polymer serve command and load up my webpage it can't find the webcomponents.min.js and the iron-component-page.html. Any reason as to why this is happening and how can I fix it?
index.html
<!doctype html>
<html>
<head>
<title>polymer-element</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page src="polymer-element.html"></iron-component-page>
</body>
</html>
I tried some of the answers given here but still can't get it to work.
I haven't quite figured it yet but polymer is using polyserve under the hood, and I think that tries to be clever with url to file directory mapping. I think it assumes a directory structure where you are developing a re-usable component so after complete when your element also sits in bower_components, you go ../web-component/web-component.html to find the import, but your development structure has bower_components within the directory you are actually developing your component in.
When dealing with an app, I just put "bower_components" at the route of my app directory, and my elements in the "src" directory as a subdirectory of that. Then I explicitly use /bower_components/web-component/web-component.html in my html imports.
Running polymer serve from the root of your app then serves that at localhost:8080/
Short answer: Assuming your working dir is "x" and components are in "x/components" , create a soft link thus:
$ ln -s components bower_components
Long answer:
polymer serve does not seem to read/honor .bowerrc.
My components directory is "components" under which all my polymer components are present.
.bowerrc --> { "directory":"components"}
Running "polymer serve" starts the server, but when I navigate to "http://localhost:8000/index.html", I get a blank page.
Upon inspecting the network traffic in the browser, all requests to webcomponentjs* are returning 404s.
So.. polymer serve is not honoring a non-default components directory. It is expecting bower-components dir.
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.
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've been playing with Polymer recently and finally I think I have my head around the shadow boundary, at least to the extent that I know where I need to include link tags to make my CSS work.
This is fine and dandy but I can't use Google fonts. If I use an #import inside my stylesheet, then as soon as that stylesheet is included in a Polymer custom element I get CORS issues:
XMLHttpRequest cannot load http://fonts.googleapis.com/css?family=Maven+Pro:400,700. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:64000' is therefore not allowed access
There's an XMLHttpRequest involved here, probably because of how Polymer fetches resources and custom elements in the first place, which I suppose is axing the header mentioned in the error message.
However, if I only use the link method
<link href='http://fonts.googleapis.com/css?family=Maven+Pro:400,700' rel='stylesheet' type='text/css'>
This doesn't cross the shadow boundary, and I still don't get my fonts.
Am I missing something obvious? How do I get Google fonts inside the shadow DOM? I tried downloading the zip file from Google Fonts itself but I only got TTF files.
What we typically do with fonts on the Polymer team is to create an HTML import that loads the font(s), and include that import as a dependency in your element's import. This puts the font definitions in the main document (so they can be used by any components) but also guarantees that the fonts will be available in your element's shadow dom.
Here's a quick example: http://jsbin.com/cefawali/1/edit
We do this with the RobotoDraft font. Here's the import: https://github.com/Polymer/font-roboto/blob/master/roboto.html
The other approach is to use no-shim and use #import:
<polymer-element>
<template>
<style no-shim>
#import url('http://fonts.googleapis.com/css?family=Maven+Pro:400,700');
</style>
...
Note There's currently a bug preventing this latter approach from working.