Question

我正在创建我的自定义手风琴元素。在其中，我将有2个成分，其中ul代表1，ul代表其他。

acordion-ul.ts文件中的内容，在其中我想要我的锂离子的插槽中。

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（因为您正在覆盖org方法以防止创建{{ 1}}）

因此，如果要使用插槽，只需从类中删除serverless.yml函数并使用影子DOM

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

shadowRoot

使用影子DOM中的元素

createRenderRoot

然后，CarbonComponents样式可能无法正常工作，因此您需要以其他方式添加它们

LitElement <slot>不起作用

1 个答案: