LitElement <slot>未唤醒

Question

我正在创建我的自定义折叠元素。其中我将有两个组件，一个用于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()中收到一个错误: Uncaught (in promise) TypeError: Cannot read property 'nodeName‘of null。

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

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

IDK，它不工作，屏幕上什么也没有打印出来。在检查元素时，我可以看到DOM中是空的。

Answer 1

您的问题是您正在尝试使用插槽，这是一个影子DOM特性，但是您没有使用影子DOM (因为您正在重写createRenderRoot方法以防止创建shadowRoot)。

因此，如果希望使用插槽，只需从类中删除createRenderRoot函数并使用影子DOM即可

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

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

使用阴影DOM中的元素

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

但是，CarbonComponents样式可能不起作用，因此您需要以其他方式添加这些样式