Paper Button element is not working in Google Chrome But Works fine In Firefox

shivarajnaidu commented 8 years ago

The paper-button element not working in _Google chrome but works well in Firefox_

_( with _webcomponents flag enabled, failed to work in firefox also ..)

I am using firefox 42 and google chrome 46.0.2490.71

Expected Result

Proper working of paper-button element display on google chrome and firefox with webcomponents enabled...

This output is taken from firefox

(without web components enabled) and working as expected..

selection_2016012217 25 57

Actual outcome

This output is taken from google chrome

(failed to work properly , * just displaying text* )

selection_2016012119 01 07

and

This output is taken from firefox (with webcomponents flag enabled)

selection_2016012217 36 59

Steps to reproduce

<!DOCTYPE html>
<html>
  <head>
    <!-- 1. Load webcomponents-lite.min.js for polyfill support. -->
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js">
    </script>

    <!-- 2. Use an HTML Import to bring in some elements. -->
    <link rel="import" href="bower_components/paper-button/paper-button.html">

  </head>
  <body>

    <paper-button>link</paper-button>
<paper-button raised>raised</paper-button>
<paper-button toggles raised>toggles</paper-button>
<paper-button disabled>disabled</paper-button>

  </body>
</html>

This is html markup i used
Run this in firefox (works fine)

3 Run inside google chrome or firefox with wecomponents enabled(failed to work properly)

My Thought About This Issue

I think paper-button testing failed in firefox because of web components flag enabled in firefox and also failed in google chrome for the same web components .. But i am not sure about this.. this is just what i thought about this...

Expecting Reason and Best Solution for this Issue to be Resolved and Documentation for Using Polymer elements is Not enough and not clear to try newbies .. please improve it

keanulee commented 8 years ago

Hi @shivarajnaidu ,

Due to CORS headers, you need to use a web server to serve files (instead of using "file://" URLs). The code you provided works as expected when using a web server.

http://jsbin.com/varixeyedu/edit?html,output

shivarajnaidu commented 8 years ago

1 . How do I accomplish the same in my computer locally for testing purposes ?

2 . Can I do this with nodejs or I need any web-server like apache? if i can do with nodejs .. How to do that?

And

3 . if it happens due to CORS then how its working well on firfox

please see my issue fully once again

@keanulee

shivarajnaidu commented 8 years ago

Sir, Please Reopen this issue @keanulee

keanulee commented 8 years ago

Please get a copy of the paper-button repo (e.g. git clone or download ZIP) and follow the same steps as https://github.com/PolymerElements/seed-element/blob/master/README.md

shivarajnaidu commented 8 years ago

:+1: @keanulee

shivarajnaidu commented 8 years ago

And if it happened due to CORS then how its works well on firfox ? I am very curious to know the reason.. why it is works in firefox but not in chrome.. will you please help me to know why it happened ? Thanks in advance .. :relaxed: @keanulee

PolymerElements / paper-button