Using html elements inside Shoelace components

[teemu-linecut]

Hi! New to Shoelace and web components, apologies if this has already been asked here or explained in the docs.

Can I use html elements inside Shoelace components? For example, I would like to show a list inside Shoelace Drawer. I tried:

<sl-drawer label="My Drawer" placement="start" class="drawer-overview" style="--size: 50vw;">
  <ul>
    <li>My list element</li>
  </ul>
  <sl-button slot="footer" variant="primary">Close</sl-button>
</sl-drawer>
<sl-button >Open drawer</sl-button>

<script>
  const drawer = document.querySelector('.drawer-overview');
  const openButton = drawer.nextElementSibling;
  const closeButton = drawer.querySelector('sl-button[variant="primary"]');

  openButton.addEventListener('click', () => drawer.show());
  closeButton.addEventListener('click', () => drawer.hide());
</script>

But I get TypeError: Cannot read properties of null on openButton.addEventListener. I tried using custom querySelectors on openButton and closeButton that takes care of the TypeError, but breaks the entire component.

Using Shoelace Tree component inside Drawer works:

<sl-drawer label="My Drawer" placement="start" class="drawer-overview" style="--size: 50vw;">
  <sl-tree>
    <sl-tree-item>My item 1</sl-tree-item>
    <sl-tree-item>My item 2</sl-tree-item>
    <sl-tree-item>My item 3</sl-tree-item>
  </sl-tree>
  <sl-button slot="footer" variant="primary">Close</sl-button>
</sl-drawer>
<sl-button>Open drawer</sl-button>

But for future reference, can I use html elements inside Shoelace components? Or is there a better way?

Thank you!

[claviska]

Can I use html elements inside Shoelace components?

Yes, absolutely!

But I get TypeError: Cannot read properties of null on openButton.addEventListener.

This tells me that openButton is being assigned by a querySelector() that doesn't match. In this example, we assigned a drawer with the "drawer-overview" class and the open button is the next element adjacent to the drawer.

const drawer = document.querySelector('.drawer-overview');
const openButton = drawer.nextElementSibling;

We do this in the docs for convenience so we don't litter it up with ids, but it's not a portable way to obtain element references. For example, adding anything — even a <br> tag — between the drawer and the button will cause that error. (Perhaps we should change how we do this in the docs.)

TL;DR – check your query selector and make sure the button is being referenced correctly and that should solve it for you!

[teemu-linecut]

I double-checked my selectors and got it working. Shoelace seems excellent for my needs. Thank you for the great library!