带appendChild的LitElement插槽不起作用

时间:2019-09-30 08:04:53

标签: javascript html lit-element lit-html

当我尝试在我的LitElement组件上添加slot child时,它不起作用,也不接受创建它。

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);
    };
  }

2 个答案:

答案 0 :(得分:2)

虽然我个人不建议您为可以实现的Web组件动态创建插槽,但是您只需要将创建代码保留在render函数中即可

例如,您可以使用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

Here's a live demo

由于您以前的代码无法按预期工作的原因,LitElement大部分希望您将与模板中的模板相关的代码保留为使用appendChild或类似DOM添加的任何内容函数将在下次更新组件时被“删除”,因此您必须在每次更新后自行添加

通过直接在render方法中添加插槽,可以确保不会以意外的方式删除插槽

答案 1 :(得分:2)

该元素是Web组件技术套件的一部分,是Web组件内的占位符,您可以使用自己的标记填充该占位符,该标记使您可以创建单独的DOM树并将它们一起显示。

您的代码正确,但是您等待其他行为 您在DOM中等待Spot元素,但是没有出现Spot,因为您没有在Spot中输入任何数据  当您尝试在组件中使用Spot时,它将正常工作 尝试一下

<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>