2

当我尝试在 LitElement 上的组件上附加插槽子时，它不起作用并且不接受创建它。

render() {
    return html `<div class="wizard-container ${this.className}"></div>`;
  }

  firstUpdated() {
    let wizardContainer = this.shadowRoot.querySelector('.wizard-container');
    for (let i = 0; i < this.steps; i++) {
      let slot = document.createElement('SLOT');
      slot.setAttribute('name', 'step_' + (i + 1))
      wizardContainer.appendChild(slot);
    };
  }
4

2 回答 2

3

虽然我个人不建议你为可以实现的 web 组件动态创建插槽，你只需要在渲染函数中保留创建代码

例如，您可以从steps变量中创建一个数组，并使用函数对其进行迭代map以创建插槽，如下所示：

render() {
  return html`<div class="wizard-container ${this.className}">
    ${Array.from({ length: this.steps }, (v, k) => k).map(
      item =>
        html`<slot name="step_${item}"><div>Default content ${item}</div></slot>`
    )}
  </div>`;
}

然后像这样使用你的组件：

<my-element steps="3">
  <div slot="step_1">Custom content</div>
</my-element>

这将导致类似：

默认内容 0 自定义内容 默认内容 2

这是一个现场演示

至于您之前的代码没有像您预期的那样工作的原因，LitElement 在大多数情况下希望您保留与渲染函数中的模板相关的代码，因为您使用appendChild或类似的 DOM 函数添加的任何内容将在下一次“删除”组件更新的时间，因此您必须在每次更新后自己附加它

通过直接在 render 方法中添加插槽，您可以保证它们不会以意想不到的方式被删除

于 2019-09-30T08:33:26.193 回答
3

该元素（Web Components 技术套件的一部分）是 Web 组件内的一个占位符，您可以使用自己的标记填充它，这使您可以创建单独的 DOM 树并将它们一起呈现。

您的代码是正确的，但是您等待另一种行为您等待 DOM 中的点元素，但不会出现点，因为当您尝试在组件中使用点时，您没有在点中输入任何数据，它会正常工作，只需尝试它

<element-details>
  <span slot="element-name">slot</span>
  <span slot="description">A placeholder inside a web
    component that users can fill with their own markup,
    with the effect of composing different DOM trees
    together.</span>
  <dl slot="attributes">
    <dt>name</dt>
    <dd>The name of the slot.</dd>
  </dl>
</element-details>
于 2019-09-30T08:53:12.447 回答