Question

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

即

的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的自定义元素，因为它已被本机元素占用...并且因为每个自定义元素名称都需要包含＆＃34; - ＆＃ 34 ;.因此可能的名称为my-button。

2）包装另一个自定义元素在非本机ShadowDom浏览器（IE，Edge，Firefox，Safari）上具有相当高的性能成本。所以最好直接使用纸质按钮。

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

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

它会将灯光节点放入您的元素中，然后从纸张按钮将其放入自身。

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

1 个答案: