Polymer 2 app: paper-button has no text

Question

I am very very new to Polymer, Material and Web Components

I used Polymer CLI to create a polymer 2 application

polymer init

And then I chose polymer-2-starter-kit

I tried to add some paper buttons to my view1 file, but I found out that paper-button has not added to the bower dependencies, so I added it myself. My bower.json looks like this:

    {
  "name": "my-app",
  "authors": [
    "Ehsun"
  ],
  "license": "",
  "dependencies": {
    "app-layout": "PolymerElements/app-layout#2.0-preview",
    "app-route": "PolymerElements/app-route#2.0-preview",
    "iron-flex-layout": "PolymerElements/iron-flex-layout#2.0-preview",
    "iron-icon": "PolymerElements/iron-icon#2.0-preview",
    "iron-iconset-svg": "PolymerElements/iron-iconset-svg#2.0-preview",
    "iron-localstorage": "PolymerElements/iron-localstorage#2.0-preview",
    "iron-media-query": "PolymerElements/iron-media-query#2.0-preview",
    "iron-pages": "PolymerElements/iron-pages#2.0-preview",
    "iron-selector": "PolymerElements/iron-selector#2.0-preview",
    "paper-icon-button": "PolymerElements/paper-icon-button#2.0-preview",
    "polymer": "Polymer/polymer#^2.0.0-rc.1",
    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.1",
    "paper-button": "PolymerElements/paper-button#1.0.14"
        
  },
  "devDependencies": {
    "web-component-tester": "6.0.0-prerelease.5"
  },
  "private": true
}

and I added the markup to one of my views as this:

    <!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../bower_components/polymer/polymer-element.html">
s<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-styles/paper-styles.html">
<link rel="import" href="shared-styles.html">



<dom-module id="my-view1">
    <template>
        <style include="shared-styles">
            :host {
                display: block;

                padding: 10px;
            }
        </style>

        <div class="card pink" >
            <h1>Start Now</h1>
            <a href="/view2"><paper-button raised class="indigo">go</paper-button></a>
        </div>


        <paper-button class="pink">link</paper-button>
        <paper-button raised class="indigo">raised</paper-button>
        <paper-button toggles raised class="green">toggles</paper-button>
        <paper-button disabled class="disabled">disabled</paper-button>
    </template>


    <script>
        class MyView1 extends Polymer.Element {
            static get is() {
                return 'my-view1';
            }
        }

        window.customElements.define(MyView1.is, MyView1);
    </script>
</dom-module>

Now the buttons are text-less as this:

Answer 1

I can see that you are using 1.0.14 tag of paper-button. That should not be compatible with v2.x of Polymer as polymer V2.x is on v1 spec of web-components and paper-button v1.x on v0.

The specific reason why your text is not coming up should be deprecation of content tag in favour of slot tag in v1 spec.

You should try 2.0-preview branch/tag of paper-button.