LitElement <slot> 不工作

Question

我正在创建自定义手风琴元素。其中我将有 2 个组件，1 个用于 ul，另一个用于 li。

文件 accordion-ul.ts 中的内容，其中有一个我想要 li 的位置。

import { html, customElement, property, LitElement } from 'lit-element';
import { Accordion } from 'carbon-components';

@customElement('accordion-panel')
export default class AccordionPanel extends LitElement {
  firstUpdated() {
    const accordionElement = document.getElementById('accordion');
    Accordion.create(accordionElement);
  }

  connectedCallback() {
    super.connectedCallback();
  }

  render() {
    return html`
      <ul data-accordion class="accordion" id="accordion">
        <slot></slot>
      </ul>
    `;
  }

  createRenderRoot() {
    return this;
  }
}

注意：我在 firstUpdated() 的控制台中收到错误：未捕获（承诺）TypeError：无法读取 null 的属性 'nodeName'。

我使用它进行测试的方式：

<accordion-panel><li>test</li></accordion-panel>

IDK，它不工作，屏幕上没有打印任何内容。在检查元素时，我可以看到 DOM.

中是空的

Answer 1

你的问题是你正在尝试使用插槽，它是影子 DOM 功能，但你没有使用影子 DOM（因为你正在覆盖 createRenderRoot 方法来防止创建 shadowRoot)

因此，如果您想使用插槽，只需从 class 中删除 createRenderRoot 函数并使用 shadow DOM

编辑：您还应该更新 firstUpdated 方法，以便此部分：

const accordionElement = document.getElementById('accordion');

使用影子中的元素DOM

const accordionElement = this.shadowRoot.querySelector('.accordion');

再一次，CarbonComponents 样式可能不起作用，因此您需要以其他方式添加它们

LitElement <slot> 不工作

LitElement <slot> not wokring

lit-element