我正在创建我的自定义 Accordion 元素。其中我将有 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() 中的控制台中遇到错误:未捕获( promise 中)TypeError:无法读取 null 的属性“nodeName”。
我使用它进行测试的方式:
<accordion-panel><li>test</li></accordion-panel>
IDK,它不工作,屏幕上没有打印任何内容。在检查元素时,我可以看到 DOM 中有空。
最佳答案
您的问题是您正在尝试使用插槽,这是影子 DOM 功能但您没有使用影子 DOM(因为您正在覆盖 createRenderRoot
方法以防止创建shadowRoot
)
所以,如果你想使用插槽,只需从你的类中删除 createRenderRoot
函数并使用 shadow DOM
编辑:
您还应该更新您的 firstUpdated
方法,以便这部分:
const accordionElement = document.getElementById('accordion');
使用影子 DOM 中的元素
const accordionElement = this.shadowRoot.querySelector('.accordion');
话又说回来,CarbonComponents 样式可能不起作用,因此您需要以其他方式添加它们
关于lit-element - 点亮元素 <slot> 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59363808/