мне нужно чтобы рамочный компонент не знал какой конкретно компонент он рендерит, чтобы он пропсом передавался. Рамочный компонент создает в себе инстанс этого компонента и дописывает в него доп класс

ладно забейте если получится выложу, но на малине я ваще хз как это сделать. Там тоже svelte:component или malina:component?

Типа <List ItemComponent={ Item } data={ array } />

Не вижу ничего невозможного в этом. И стилизация будет работать как надо с глобальными классами.

Все это к телеге про маунт стилей при импорте вообще. Маунт при маунте компонента, словом, вполне норм :)

Мне кажется в динамике не норм. Ночью соберу семпл попробую

Если у нас <List ItemComponent={ Item } data{ [] }/><Item/> а затем <List ItemComponent={ Item } data={ array }/><Item/> то список зарендерил все свои куски но ниодного айтема, поэтму стили кусков в доме раньше, затем идут стили айтема потому что он позже. Затем айтемы маунтятся в список и их стиль сильнее потому что позже запендился в дом. Но список хотел вешать свой класс на айтемы который должен быть сильнее и не может этого сделать.

просто component и ссылка на него

<component:selected />
<component:{x ? selected.component : null} />

<component:selected />
<component:{x ? selected.component : null} />

В последнем если лежит функция которая возвращает компонент, то оно тоже добавляет его?

() => x ? selected.component : null грубо говоря

оно так и работает, но () => не нужен

Так это всё теоритезирование.
На практике всё будет так:
1. стили в Item работают через хэш, они изолированы и имеют минимальный приоритет (как ты и хочешь)
2. чтобы стилизовать в List элементы Item, тебе надо оборачивать item в див и задавать глобальный стиль. У них будет второй приоритет.
3. чтобы стилизовать в главном родительском элементы Item, тебе надо оборачивать List в див и задавать глобальный стиль. У них будет наивысший приоритет, потому что раньше замаунчен компонент.

Но это всё, на мой взгляд, грязнющая грязь, я бы так никогда не делал. Может, я не настолько адвансд как ты, конечно.

Если так можно, то у меня вопрос про такой кейс:

<component:{() => {
  setTimeout(() => {
    return x ? selected.component : null
  }, 5000)
}} />

Как это будет работать?

Ну и всегда остаются обходные манёвры, типа увеличения специфичности селектора и !important. Если тебе норм заниматься вот этой свистопляской, наверное, ты и к увеличению специфичности должен норм относиться :)

я просто работаю с порядком импортов и маунт стилей происходит на ините модуля, там все детермированно и нет динамики в порядке стилей в доме

<component:{() => {
  setTimeout(() => {
    return x ? selected.component : null
  }, 5000)
}} />

return в таймауте, в шаблоне. безсмысленный код,
timeout нужно перенести в js блок, догда будет норм

То что он бессмысленный не значит что несуществующий :)

вот набросал итем в листе, и раскрасил из приложения:
https://malinajs.github.io/repl/#/share/5faea38752ce0f00177fdc16

какая-то ошибка валится, потом разебрусь, но пример работает

а вот лист сам отрисовывает переданый итем. и пробрасывает класс на 2 уровня вниз:
https://malinajs.github.io/repl/#/share/5faea5c352ce0f00177fdc3a

class="red" - для листа
class:item="green" - лист передает в итем