使用纸按钮的自定义元素

Question

我正在尝试使自定义元素中的文本动态化。我创建了一个自定义元素，它使用纸按钮库创建一个按钮。我希望显示的文本值是用户在调用自定义元素时使用的任何值。

即

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>

基本上，我希望自定义按钮元素是自定义标签之间的任何文本值。

Answer 1

1) 您不能拥有名为 button 的自定义元素，因为它已被原生元素占用...并且因为每个自定义元素名称都需要包含“-”。所以一个可能的名字是 my-button.

2) 包装另一个自定义元素在 non-native ShadowDom 浏览器（IE、Edge、Firefox、Safari）上的成本很高 high-performance。所以直接使用 paper-button 可能更好。

如果您仍想使用它，可以使用默认插槽

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

它会将灯光 dom 节点放置到您的元素中，然后从那里 paper-button 将它放置到自身中。

使用纸按钮的自定义元素

Custom element using paper-button

javascript

polymer