在模板

如何解决在模板

我有一个自定义元素“ thing-y”，该元素使用template和两个slot。

      <template id="thingy-template">
          <details>
            <summary><slot name="thing-id">THING</slot></summary>
            <p><slot name="thing-content">VALUE</slot></p>
          </details>
      </template>

thing-y元素构造函数在阴影DOM中克隆模板

  customElements.define('thing-y',class extends HTMLElement {
    constructor() {
      super();
      const template = document
        .getElementById('thingy-template')
        .content;
      this.attachShadow({mode: 'open'})
        .appendChild(template.cloneNode(true));
    }
  });

然后在页面中的任意位置使用元素

      <thing-y id="something">
        <span slot="thing-id">Something</span>
        <span slot="thing-content">42</span>
      </thing-y>

到目前为止，很好。

现在，我想在slot的两个地方使用相同的template值，所以我将template的定义更改为

  <template id="thingy-template">
    <details>
      <summary><slot name="thing-id">THING</slot></summary>
      <p><slot name="thing-id">THING</slot> 
          content is <slot name="thing-content">VALUE</slot></p>
     </details>
  </template>

但是只有前slot个内容被其值替换，第二个内容保持不变。

如何实现这个简单的要求？