Custom styling, injecting css into shadow DOM ?

[Deepblue1337]

I am currently trying to adjust the Style of the Chat a bit, unluckily i can't seem to find a way to get my css changes into the shadow DOM of the ChatWindow, could anyone advice an workaround ?

I also tried to pull the Project, make some changes and link it locally via npm but when doing so i receive following error:

vue-advanced-chat.es.js?7c48:1 Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function. at VueCustomElement.VueElement (vue-advanced-chat.es.js?7c48:1:1) at new VueCustomElement (vue-advanced-chat.es.js?7c48:1:1) at Object.isUnknownElement (vue.esm.js?a026:5653:1) at isUnknownElement$$1 (vue.esm.js?a026:5905:1) at createElm (vue.esm.js?a026:5942:1) at createChildren (vue.esm.js?a026:6058:1) at createElm (vue.esm.js?a026:5959:1) at VueComponent.patch [as __patch__] (vue.esm.js?a026:6482:1) at Vue._update (vue.esm.js?a026:3948:1) at VueComponent.updateComponent (vue.esm.js?a026:4069:1)

and

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Messaging> at src/views/messaging/messaging.vue <Anonymous> <DefaultContainer> at src/containers/DefaultContainer.vue <App> at src/App.vue <Root>

I`ve imported the register function and also added the custom element option in the vue.config.

[despatates]

The CSS in the main window doesn't apply to the shadow DOM. I don't know if it's the best solution, but here is what I use.

The template:

<vue-advanced-chat
  ref="vac"
  ...
/>

In the methods of my component:

addCustomStyle() {
  const style = document.createElement('style')
  style.textContent = '.vac-textarea:focus { border-color: var(--v-primary-base); }'
  this.$refs.vac.shadowRoot.appendChild(style)
}

Finally, I trigger the method when my component is mounted:

mounted() {
  const vm = this
  setTimeout(() => {
    // wait for the reference `this.$refs.vac` to be available
    vm.addCustomStyle()
  })
}

Hope this helps.

[reslear]

my solution custom styling class, with reactive changes for component:

vac-chat.vue

<script lang="ts">
const props = withDefaults(
  defineProps<{
    customStyle?: string
  }>(),
  {
    customStyle: '',
  },
)

const vacRef = ref()
const customStyle = ref('')

function addCustomStyle() {
  const style = document.createElement('style')
  style.id = 'vac-custom-style'
  style.textContent = customStyle.value

  const root = vacRef.value?.shadowRoot

  if (!root) return

  const styleEl = root.querySelector('#vac-custom-style')

  if (styleEl) {
    styleEl.replaceWith(style)
  } else {
    root.appendChild(style)
  }
}

watchEffect(() => {
  if (
    vacRef.value &&
    props.customStyle &&
    customStyle.value !== props.customStyle
  ) {
    customStyle.value = props.customStyle
    addCustomStyle()
  }
})
</script>

<template>
	<vue-advanced-chat ref="vacRef" />
</template>

<template>
	<vac-chat 
		:customStyle="'.vac-col-messages{border-radius: 20px}.vac-text-started{display:none !important};'"
	/>
</template>