How to target <teleport> content with CSS rule of parent in Vue3?

Question

Many developers are starting using <teleport> in their components. For example dropdown component in primeVue, use teleport for select options, with sending them to end of the body.

This although brings big problem/question for CSS targeting, where I can not use parent classes to target here is direct example :

  <div class="red-container">
      <Dropdown v-model="dropSelect" :options="yesNo" optionLabel="name" optionValue="code" />
  </div>

with style

.red-container .option-item{
 color : red
}

This css will fail of simple reason that options html is not inside ".red-container" but at the end of the body since component authors decide to use <teleport> for it, so it seems impossible to style it depending on parent class.

I encounter this behavior in several components while doing maintenance updates of versions, breaking all my themes, trouble is I do not know how to fix this?

How do You target teleported content CSS with parent class, is it even possible ?

Answer 1

Source of this question was migration of primeVue from 3.0.2 to 3.7.+, where components "multiselect" "dropdown" started to use telepot functionality which broke the css, as mentioned in this question description.

PrimeVue did actually adviced solution to this by setting component "appendTo"

<Dropdown appendTo="self"

Where setting "self" will move teleport inside actual component so it will dissable teleport, removing issues which teleport cause. So after editing 40 components with that I could move on :) . AppendTo accept also selector so teleported content is freely movable anywhere.

Conclusion : "Do not use vue 3 teleport if You do not know what are You doing :) , and if You use it make sure You'll add component options to control its behavior by overriding teleports 'disabled' or 'to' properties.