如何实现基于paper-button的自定义元素内部文本动态化？

嘿，这个需求其实用Web Components的原生插槽（Slot）就能轻松搞定，完全不用写复杂的JS逻辑来监听内容变化。我给你一步步拆解怎么做：

1. 自定义元素模板里添加插槽 #

在你的自定义按钮元素的HTML模板中，把<paper-button>内部的固定文本替换成<slot></slot>——这个插槽就是专门用来接收用户在自定义标签之间传入的内容的，会自动把外部的文本渲染到paper-button里。

比如你的自定义元素（假设叫my-custom-button）的代码可以这么写：

<!-- button.html 自定义元素的模板 -->
<template>
  <style>
    /* 这里可以添加你的自定义样式 */
    paper-button {
      --paper-button-background: #2196F3;
      --paper-button-color: white;
    }
  </style>
  <paper-button>
    <slot></slot> <!-- 关键：用插槽接收外部传入的任意文本 -->
  </paper-button>
</template>

<script>
  class MyCustomButton extends HTMLElement {
    constructor() {
      super();
      const template = document.querySelector('template').content;
      this.attachShadow({ mode: 'open' }).appendChild(template.cloneNode(true));
    }
  }

  customElements.define('my-custom-button', MyCustomButton);
</script>

2. 在调用页面使用自定义元素 #

然后在你的index.html里，直接在自定义标签之间写任意文本，插槽会自动把内容渲染到paper-button上：

<!-- index.html 调用示例 -->
<!DOCTYPE html>
<html>
<head>
  <!-- 记得引入paper-button的相关依赖文件 -->
  <!-- 引入你的自定义元素 -->
  <script type="module" src="button.html"></script>
</head>
<body>
  <!-- 直接在标签之间写文本，会显示在按钮上 -->
  <my-custom-button>点击提交表单</my-custom-button>
  <my-custom-button>取消操作</my-custom-button>
  <my-custom-button>查看详情</my-custom-button>
</body>
</html>

3. 动态修改文本的额外技巧 #

如果之后需要动态修改按钮文本，你有两种简单方式：

• 直接修改自定义元素的textContent：

  const btn = document.querySelector('my-custom-button');
  btn.textContent = '新的按钮文本';
  

• 或者给插槽命名（比如<slot name="btn-text"></slot>），然后在外部用<span slot="btn-text">...</span>包裹文本，之后修改这个span的内容：

  <!-- 调用时的命名插槽写法 -->
  <my-custom-button>
    <span slot="btn-text" id="btnText">初始文本</span>
  </my-custom-button>
  
  <!-- 动态修改 -->
  <script>
    document.getElementById('btnText').textContent = '更新后的文本';
  </script>
  

这样不管是静态传入还是动态修改，都能完美实现你要的效果啦！

内容的提问来源于stack exchange，提问作者CacheMeOutside