cannot inject my own css file

[lala960]

Hi @antoine92190

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

i am using your above code in my custom method addCustomCss() and calling that method in mounted.... but fails....

shadowRoot undefined issue in console log..... even i am using ref="chatWindow" in </vue-advanced-chat/> component.... can u guide me how to resolve this....

i also used the below code ....

const style = document.createElement('style') const styles = await import('./src/styles/theme.scss') style.innerHTML = styles this.$refs.chatWindow.shadowRoot.appendChild(style)..... but again fails with console error...

Uncaught (in promise) TypeError: Cannot convert object to primitive value at VueComponent.addCustomCss .....

i am totally new in vuejs please can u guide me which approch should i use and how ????

[Khalilbz]

This code have worked for me:

  mounted() {
    const style = document.createElement('style');
    style.innerHTML = '.vac-message-box { max-width: 90% !important; }';
    this.$refs.chatWindow.shadowRoot.appendChild(style);
  },

Ensure that you have ref="chatWindow" and that you are using mounted so that the component is in the DOM, and in a very rare case ensure that you have the component implemented like this <vue-advanced-chat></vue-advanced-chat> not like this <vue-advanced-chat />