使用纸质按钮的自定义元素

Question

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. 我创建了一个自定义元素，该元素使用paper-button lib创建了一个按钮。 I want the value of the text displayed to be whatever value used by the user when calling the custom element. 我希望显示的文本值是用户调用自定义元素时使用的任何值。

ie 即

index.html 的index.html

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

button.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. 基本上，我希望自定义按钮元素成为自定义标签之间的文本值。

Answer 1

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 "-". 1）您不能有一个名为button的自定义元素，因为它已被本机元素使用...，因为每个自定义元素名称都必须包含“-”。 So a possible name would my-button . 因此，可能的名称为my-button 。

2) Wrapping another custom element has pretty high-performance cost on non-native ShadowDom Browsers (IE, Edge, Firefox, Safari). 2）在非本机ShadowDom浏览器（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. 它将把光dom节点放置到您的元素中，然后从那里用纸按钮将其放置到自身中。

使用纸质按钮的自定义元素

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-03-09 22:36:15

使用纸质按钮的自定义元素

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-03-09 22:36:15

解决方案1
1 已采纳 2018-03-09 22:36:15