I am trying to run a simple polymer web component on a localhost server on my mac.
I think I have followed the tutorial correctly but the #shadow root information is not appearing within the element tag (as you can see in the image) .
The imports are working because polymer.html is being imported in. I can't figure out why the information is not being displayed with the element I have set up. When I run it in safari the H1 appears briefly (for less than a second) then disappears so this tells me polymer is set up properly it just isn't being pulled into the #shadow root of for some reason...
I have been fighting with this for a couple of days.
any help you can give would ber great and save me many more headaches :)
Cheers guys!!
THIS IS THE OUTPUT ON THE LOCAL HOST SERVER...
<html><head><style>body {transition: opacity ease-in 0.2s; }
body[unresolved] {opacity: 0; display: block; overflow: hidden; position: relative; }
</style>
<!-- 1. Load platform support before any code that touches the DOM. -->
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<!-- 2. Load the component using an HTML Import -->
<link rel="import" href="bower_components/polymer/polymer.html">
</head>
<body>
<polymer-element name="bens-element" noscript="">
<template>
<h1>This is the shadow dom</h1>
</template>
</polymer-element>
<!-- 3. Declare the element by its tag. -->
<bens-element></bens-element>
</body></html>
<!DOCTYPE html>
<html>
<head>
<!-- 1. Load platform support before any code that touches the DOM. -->
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<!-- 2. Load the component using an HTML Import -->
<link rel="import"href="bower_components/polymer/polymer.html">
</head>
<body>
<polymer-element name="bens-element" noscript>
<template>
<h1>This is the shadow dom</h1>
</template>
</polymer-element>
<!-- 3. Declare the element by its tag. -->
<bens-element></bens-element>
</body>
</html>
Safari has no native support for shadow dom yet. It is able to run your polymer application using polyfills. The web component standard is not yet supported on most browsers.
Run the application on Google Chrome. You'll see the #shadow root.
Check this page for information for browser compatibility
unresolved attribute is used to mark that the page is not yet initialised.
Edit:
These are causing you problem -
You're using tagged version of dependencies
I tried building using the versions of dependencies that you're using. Same result. I checked and are just tagged releases. Polymer is still in beta and undergoing heavy development. The latest release from the repo that you should be using are - polymer 0.9.0 and webcomponentsjs 0.6.1
It is the polymer dependency that's causing the behaviour in your case. Because I use webcomponentsjs 0.7.0 for all development. Use bower to resolve your dependencies. Will be simpler if you remove the bower_components folder an bower.json and reinstall the dependencies
The body tag should contain the unresolved attribute.
This is done to prevent unresolved data-bindings and rules from being displayed in the browser. Because custom elements of polymer take time to initialise. Otherwise you’ll see a lot of double moustache symbols - {{}} in page for data bindings and also missing style rules or an empty page.
WebComponents.js adds a style rule for selector body[unresolved] to the page when it is initialised. It sets the opacity to 0 - invisible. So no contents are displayed yet.
After Polymer has successfully initialised all custom-elements, the templates and data bindings resolved, it removes the unresolved attribute.
The page fades into view over 200ms because of another body style rule added on webcoponents initialisation.
Check the head tag for these two style rules added when the page has initialised.
Related
I created a blank jekyll blog and I included parallax.js with CDNlink and the link is :
(script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js">)
but when I ran it in localhost the moving effect that I have imported doesn't work. In my rails app that I created it works perfect there.Also if I deploy it on GITHUB pages will the parallax work there?What should I do to fix that issue?
I upload in github pages https://lazospap.github.io/LazPap/. There are a lot to be fixed but for now i can't see the images.
YES, parallax effect can work on Github pages.
You probably just made some coding errors/mistakes.
Rules to follow
1. Nothing can be placed after </body></html>
The first mistake I see is that nothing can be placed after </body></html>. Your layout file contains this:
</body>
</html>
<!-- Bootstrap core JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery/jquery.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Custom scripts for this template -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/js/creative.min.js"></script>
It should be:
<!-- Bootstrap core JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery/jquery.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Custom scripts for this template -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/js/creative.min.js"></script>
</body></html>
2. Open and close the body only once
You embed the content in your layout. Your layout has a body open and a body close tag... however, your content also has a body open and a body close tag. Therefore you open and close the body of your HTML file twice. Remove it in your content file and your are set. Find <body id="page-top"> and </body> in this file and this file and remove them.
3. Use layouts for (complex) HTML and JS
The code < 150 on line 184 gets wrongfully escaped. This is probably due to the fact that you are writing complex HTML and JS in a markdown file. You could prevent this by combining the HTML from 'index.md' and 'default.html' in a file 'home.html' in your layout directory. Your index.md file should then reference 'home' as layout instead of 'default'. Here is the error:
SyntaxError: missing ) after conditionLazPap:184:34
4. Call functions only after they are declared
I know it gets kind of hard to grasp when you use 'defer', but the rule of thumb is to call a function only after you have declared it. Parallax is a function that gets declared in line 71 of default.html:
<script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
But you call the function inside the content part of that same file on line 38. That does not work, and if it does it is solely due to the 'defer' statement.
5. Use a baseurl
When you host on Github Pages you need a basurl. The reference to your images is /images/HTML_5.png. Because you host on Github pages your baseurl should be /LazPap so your url becomes /LazPap/images/HTML_5.png. More reading about baseurl...
A simpler solution...
You started out with a copy of this code: https://blackrockdigital.github.io/startbootstrap-creative/. The easiest way to achieve a parallax-like effect would be to add JUST ONE CSS rule to the original code:
header.masthead {background-attachment: fixed;}
Although it is the solution I would use, it is probably not what you want, as you specifically mentioned parallax and a javascript solution.
I have included api, before everything were working perfect in polymer 1.7, after upgraded to polymer ^2.0 google map does not renders.
here is my code in main app page written polymer class base:
<iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="404">
<jj-maps name="maps" user="{{user}}" sprof="{{sprof}}"></jj-maps>
<jj-list name="list" > Jobs </jj-list>
<jj-infos name="infos"> infos </jj-infos>
<jj-contacts name="contacts" > Contacts </jj-contacts>
<jj-messages name="messages"> Messages </jj-messages>
<jj-404 name="404" > 404 </jj-404>
</iron-pages>
at jj-maps.html code sample is :
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/google-map/google-map.html">
<link rel="import" href="../bower_components/google-map/google-map-marker.html">
style codes in template tag:
<dom-module id="jj-maps">
<template>
<style include="iron-flex iron-flex-alignment">
:host {
.....
google-map, #mapResults {
margin-top: 10px;
position: relative;
height: 100vh;
width: 100vh%;
z-index: 1;
}
....
<div id="mapResults">
<google-map
id="map"
map="{{map}}"
latitude="[[latitude]]"
longitude="[[longitude]]"
zoom="10"
api-key="[[myApiKey]]"
on-google-map-ready= '_mapLoaded'
additional-map-options='{"gestureHandling" : "greedy"}'
>
<google-map-marker map="{{map}}" slot="marker" latitude="{{latitude}}" longitude="{{longitude}}"
title="You are here !" icon="./src/image/gpslocc.png" draggable="true">
</google-map-marker>
<template is="dom-repeat" items="{{sprof}}" as="item">
<google-map-marker map="[[map]]" slot="marker" latitude="[[item.myLat]]" longitude="[[item.myLng]]" animation="DROP" click-events title="{{item.prof}}" icon="{{calculateIconType(item.isFree)}}" on-google-map-marker-click='showUserDetail' userid="[[item.uid]]" isFree="{{item.isFree}}" >
</google-map-marker>
</template>
<paper-fab icon="maps:my-location" on-tap="updateCurrentPosition"></paper-fab>
</google-map>
</div>
</template>
this code works perfect in previous polymer. And Another point when I bower install the dependencies as bower install --save GoogleWebComponents/google-map
bower asks me for two as :
- Unable to find a suitable version for polymer, please choose one by typing one of the numbers below:
I chose : 7) polymer#^2.0.0 which resolved to 2.0.1 and is required by myApp
- Unable to find a suitable version for webcomponentsjs, please choose one by typing one of the numbers below:
I chose : 2) webcomponentsjs#^1.0.0 which resolved to 1.0.1 and is required by myApp
Sorry in advance that I ve written detailed codes. Meanwhile I have tried many options but could not able to render map in my jj-maps elements (class base template, even I have tried legacy template (as same as polymer 1.7 ver)
Here is is console warning :
dom-module.html:24 dom-module google-map has style outside template
dom-module google-map-marker has style outside template
Maps are not rendering...
So, how to solve ? Thanks in advance. (previous polymer ver. working at jobijoy.com
I'm having exactly same issue. Tried to add slot="marker" to google-map-marker as someone suggested Polymer 2.0 issue in github but doesn't work for me. It looks like the google-map component's size is set to 0 by 0 thus does not display at all. Since the google components are not updated to be compatible with Polymer 2.0. I've manually updated my local google-map.html and google-map-marker.html files under bower_component folder and moved the style tags into the template tags. The warnings are gone and the map displays now. I guess we have to wait for the update of the google components for things to work properly. I hope this helps.
slot="marker"
should solve the issue.
Unfortunately the example in the code does not insert this important line.
Here is the without slot="markers" current code example:
<google-map latitude="37.77493" longitude="-122.41942" fit-to-markers>
<google-map-marker latitude="37.779" longitude="-122.3892" draggable="true" title="Go Giants!">
</google-map-marker>
<google-map-marker latitude="37.777" longitude="-122.38911">
</google-map-marker>
</google-map>
And below the suggested corrected example that should be inside the code:
<google-map latitude="37.77493" longitude="-122.41942" fit-to-markers>
<google-map-marker slot="markers" latitude="37.779" longitude="-122.3892" draggable="true" title="Go Giants!">
</google-map-marker>
<google-map-marker slot="markers" latitude="37.777" longitude="-122.38911">
</google-map-marker>
</google-map>
What is happening?
google-map does not know when markers are inserted or updated because without the attribute slot="markers" they are inserted outside the slot where they should be inserted in.
Several consequences can happen from this issue: the map can be viewed, but not respond to important events, like fit-to-markers.
In these turbulent moves from original without-slots version to the current slotted version (and soon moving to polymer 3.0 version) of the excellent google-map webcomponent, there is a high chance that the busy developers simply forgot to add this important slot="markers" attribute in the example that shows how to add each new google-map-marker webcomponent inside google-map.
This only complements the already correct above answer. If anyone needed more explanation, I offer these, If I am correct, of course (please correct me if I made wrong conclusions).
You can detect this flaw inspecting your google-map element. Without the slot="markers" correction, open google-map; inside it, open iron-selector; and finally inside it open the element <slot id="markers" name="markers"><slot>. If you do not use the suggested correction, this slot will be empty. If you use this suggested correction, this slot will contain references to each google-map-marker. And so the google-map element will be able to handle several events that rely on detecting when each marker is inserted or updated.
Sorry for the long answer.
I've been working with the design UI of our website and looking for some templates available in the web.
Then I encountered with this syntax <!----> and I'm not familiar with it.
Can you please tell me what is it and what is it used for?
thank you.
As the other posts have mentioned the <!----> code in HTML is used for adding comments - a note left in the code by a developer with some info for other developers, or to remember something themselves. This code is viewable in the source but not displayed when viewing the HTML in the browser. Ex:
<!-- We need to update this each year -->
<div>© 2009 - 2016</div>
will produce:
© 2009 - 2016
In most cases the comment can be removed with no side-effect on the code. It's simply a note for developers.
Other Uses
Commenting Out Code
In addition to comments you'll sometimes see HTML code wrapped by <!---->. Ex:
<!-- Add this later
<img src="article.jpg" alt="Article">
-->
The above code will remove the entire image tag from the browser view. This is useful if you want to temporarily remove some HTML from a page, for testing/debugging or for later use. You'll sometimes see entire HTML sections commented out.
Conditional Code
Another common use of comments is to add conditional code used by specific browsers. The following snippet of code would only be read by Internet Explorer 8, and would apply a black background color to the body.
<!--[if IE 8]>
<style>
body {
background-color: black;
}
</style>
<![endif]-->
Website Builders
Some website builders generate their own code comments for internal use. For example, if you use Squarespace the generated code will contain comments like:
<!-- This is Squarespace. --><!-- www -->
These snippets, in some cases, are used by the generators themselves as a marker for inserting other code.
Build Scripts
There's a small chance the comment tag is being used as part of a build script, and in this case removing it would cause issues. Here's an example:
<!-- build:css -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!-- endbuild -->
The above code, used with a build system like Gulp and a Gulp plugin like HTML Replace will replace the content between the <!-- build:css--> and <!-- endbuild --> tags with new code. Removing either one of those comment tags will cause errors.
html comment tag
White space is not permitted between the markup declaration open delimiter(""). A common error is to include a string of hyphens ("---") within a comment. Authors should avoid putting two or more adjacent hyphens inside comments.
Reference : https://www.w3.org/TR/html4/intro/sgmltut.html
in that page goto 3.2.4 Comments title
this is an html comment tag.See this link below to know more
http://www.w3schools.com/tags/tag_comment.asp
This allows you commenting your html
<!--- my comment -->
(with --> to close it that's right)
I've read the new style modules recommendation in Polymer 1.1 and it works beautifully.
My issue here, again, as with the old approach is how could I move all my CSS to a CSS file and not just place it between a <style> tag in the HTML?
Here's an example.
I have a custom <ot-subscribe> element that looks like this:
<dom-module id="ot-subscribe">
<template>
<style>
paper-input {
--paper-input-container-underline: {
display: none;
};
--paper-input-container-underline-focus: {
display: none;
};
}
</style>
<form is="iron-form">
<paper-input placeholder="{{labelPlaceholder}}" no-label-float></paper-input>
<ot-button submit class="button-secondary">{{labelSubscribe}}</ot-button>
</form>
</template>
</dom-module>
As you can see I have a paper-input for which I want to hide the underlines.
This example works just fine.
Now, I need to move that CSS in an external CSS file, but keep it all working exactly the same. So the final markup would look something like this (I've added comments to explain the different approaches I've tried).
<dom-module id="ot-subscribe">
<template>
<!-- Both of these have absolutely no effect -->
<style type="text/css" src="external.css"></style>
<style src="external.css"></style>
<!-- This DOES work, however only for regular CSS, no custom properties or mixins would work -->
<!-- Also, it's deprecated: https://www.polymer-project.org/1.0/docs/devguide/styling.html#external-stylesheets -->
<link rel="import" type="css" src="external.css">
<!-- Using a style module DOES work, however we're just moving the issue, not solving it, since the CSS must still be in the HTML not in an external CSS file -->
<style include="shared"></style>
<form is="iron-form">
<paper-input placeholder="{{labelPlaceholder}}" no-label-float></paper-input>
<ot-button submit class="button-secondary">{{labelSubscribe}}</ot-button>
</form>
</template>
</dom-module>
Why do I need this? One word: Sass.
Has anyone else ever encountered this issue? Has anyone found a solution?
Or to summarize my question, how the heck does one use Sass with Polymer?
As far as I know this is not supported. There are tools available that create style-modules from CSS files automatically though.
https://github.com/Polymer/polymer/issues/2429
build step: https://github.com/MaKleSoft/gulp-style-modules
web service: https://poly-style.appspot.com/demo/
Unfortunately, I'm finding the current documentation/examples for the usage of paper-styles a bit lacking. I'm not an experienced CSS guy (relative newbie actually), so I could really use examples of how to implement Polymer 1.0 application-wide styling in order to be used by all of it's custom elements (i.e. by applying classes to any tags in those custom element's local DOMs). I did this kind of thing relatively easily in Polymer 0.5 using core-styles, but it has changed enough in 1.0 to confuse me, particularly without full docs/examples to work from. It also seems there may be a few ways to accomplish this. I'm also wondering if paper-styles is still considered experimental in 1.0? There are no docs or examples for it's use in polymer 1.0 online element catalog (https://elements.polymer-project.org/elements/paper-styles), although I did come across 'some' on it's gitHub repository.
The general misunderstanding seems to be, that just by importing the paper-styles element, the document gets styled according to the material design specs. That's not the case.
You just get all the variables and mixins.
Then you need to apply them to each and every element inside your custom-element the way you see it fit.
Here is an example element:
<dom-module id="demo-element">
<template>
<style>
:host {
display: block;
background: var(--paper-blue-500);
padding: 20px;
}
.title { #apply(--paper-font-title); }
button { #apply(--paper-font-button); }
</style>
<h1 class="title">Hello World</h1>
<button>Demo</button>
</template>
<script>
Polymer({
is: 'demo-element'
});
</script>
</dom-module>
Luckily the styles are nicely structured inside just four files with each just a couple of hundred lines max.
One thing you can do when documentation is lacking is search through other projects that are using the code you would like to use. paper-tabs, for example, uses paper-styles. You can see an example import of paper-styles/color.html in paper-tabs.html. The value --paper-yellow-a100 is being used in paper-tabs.html. Below is an example of using various CSS variables (var) and mixins (#apply) defined in paper-styles to apply style to the main document.
<!DOCTYPE html>
<html>
<head>
<title>paper-styles Example</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html" />
<link rel="import" href="bower_components/paper-styles/paper-styles.html" />
<style is="custom-style">
.shadow {
#apply(--shadow-elevation-16dp);
}
section {
background-color: var(--google-blue-700);
}
p {
#apply(--paper-font-display3);
}
</style>
</head>
<body>
<section class="shadow">
<h1>Example</h1>
<p>
This is an example using <em>paper-styles</em>.
</p>
</section>
</body>
</html>
Click here to learn more about styling in Polymer 1.0.
Concerning your question about paper-styles being experimental, on the Polymer home page in the catalog section it states:
Custom elements, built by the Polymer team, ready to use in your
applications.
However, in various locations on the site, including styling, there are mentions of experimental features.
the custom properties shim included in Polymer includes an
experimental extension
At this time using #apply would be considered experimental.
There is a page on the Polymer website titled Experimental features & elements you can look at for more information.