Custom element using paper-button

I'm trying to make the text inside a custom element dynamic. I've created a custom element that creates a button using the paper-button lib. I want the value of the text displayed to be whatever value used by the user when calling the custom element.

i.e

index.html

<html>
  <head>
  </head>
  <body>
    <button>THIS VALUE HERE</button>
  </body>
</html>

button.html

<dom-module id='button'>
<template>
    <paper-button raised> (TO BE PLACED HERE) </paper-button>
</template>
<script>
    class Button extends Polymer.Element {
        static get is() {
            //return custom element
            return 'button';
        }
    }
    customElements.define(Button.is, Button);
</script>

basically, I want the custom button element to be whatever the text value is between the custom tag.

Solution

1) You can't have a custom element called button as it is already taken by a native element... and because every custom element name needs to contain a "-". So a possible name would my-button.

2) Wrapping another custom element has pretty high-performance cost on non-native ShadowDom Browsers (IE, Edge, Firefox, Safari). So probably better to use paper-button directly.

If you still want to use it you can do so using a default slot

<paper-button raised><slot></slot></paper-button>

it will place the light dom node into your element and from there paper-button will place it into itself.