LitElement <slot> not wokring

Question

I'm creating my custom accordion element. In which I'll have 2 components 1 for ul and other for li.

Content in file accordion-ul.ts, in which I've a slot where I want my 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;
  }
}

NOTE: I'm getting an error in the console in the firstUpdated() : Uncaught (in promise) TypeError: Cannot read property 'nodeName' of null.

The way I'm using it for testing:

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

IDK, it's not working and nothing is printing on the screen. On inspecting the element, I can see there's empty in DOM.

Answer 1

Your problem is that you're trying to use slots, which are a shadow DOM feature but you're not using shadow DOM (since you're overwriting the createRenderRoot method to prevent the creation of the shadowRoot)

So, if you want to use slots, just remove the createRenderRoot function from your class and use shadow DOM

Edit: You should also update your firstUpdated method so that this part:

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

Uses the element from your shadow DOM

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

Then again, CarbonComponents styling will probably not work so you'll need to add those in some other way