Как контейнер может изменить свойство отображения CSS дочернего элемента в слотах по умолчанию? ⇐ CSS

[Anonymous]

У меня есть игровая площадка vue.
Компонент-контейнер должен иметь возможность управлять свойством отображения CSS неизвестного количества дочерних элементов в слоте по умолчанию.
Я предполагаю, что дочерние компоненты должны будут хранить свойство или каким-то образом идентифицировать себя в своем контейнере.
Как контейнер может изменить свойство отображения CSS одного из компоненты в слоте по умолчанию?
В идеале метод, используемый для управления свойством отображения CSS, можно использовать для управления другими свойствами CSS.
Примечание , есть соответствующий вопрос: Как контейнер может изменить отображение дочернего элемента в слотах по умолчанию? который обрабатывает отображение/скрытие дочерних компонентов только без использования CSS.
App.vue

import Container from './Container.vue'
import ChildA from './ChildA.vue'
import ChildB from './ChildB.vue'









Container.vue

import { useSlots, useAttrs, onMounted} from 'vue'

const slots = useSlots()

function logSlots(where) {
console.log( `${where} slots`, slots )
const children = slots.default()
console.log( `${where} slots children`, children.length, children )
}

logSlots("setup")

function changeDisplay(whichChild, show) {
console.log( "change display", whichChild, show)
// how can I know I am accessing child a?
// what goes here?
}

onMounted( () => {
logSlots("onMounted")
})



log slots
Hide Child A
Show Child A




ChildA.vue





ChildA



ChildB.vue





ChildB




Подробнее здесь: https://stackoverflow.com/questions/783 ... default-sl