How do I hide the header completely?

[abbjetmus]

Hi I would like to hide the header completely so that it doesn't take up any space?
If I set display none from developer tools it is removed but can't do it from my application.
Would be nice to have a prop for this, can't see there are any right now?

<template>
  <vue-advanced-chat
  >
    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
    <div slot="room-header">
      <div></div>
    </div>
  </vue-advanced-chat>
</template>

.vac-room-header {
  display: none !important;
}

[antoine92190]

You can override css like this:

const style = document.createElement('style')
style.innerHTML = '.vac-room-header { display: none !important; }'
this.$refs.chatWindow.shadowRoot.appendChild(style)

[abbjetmus]

That worked! Thank you and for the amazing component!