Понадобилось как-то стилизовать содержимое v\-html (html, преобразованный из markdown) в нескольких компонентах

Прокидывать всё через :deep() было как-то совсем грустно, поэтому придумал такой вариант

```
// import в main.ts или так один раз:

```

```
// md.css
.md {
table {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
display: block;
overflow-x: auto;

...
```

на элементе с v\-html в шаблоне ставится class="md"

#css

Не стоит завидовать программистам с родным английским

```
включить "отмеченный" из "отмеченный";
включить "vue" из "vue";
включить "использоватьМаршрут" из "vue-маршрутизатор";

постоян маршрут = использоватьМаршрут();

консоль.регистрировать(маршрут.параметры.ид);

постоян свойства = определитьСвойства<{
рекомендация: Рекомендация;
}>();

постоян htmlДанные = вычисляемое(() => {
если (!свойства.рекомендация) {
вернуть "";
}
постоян данные = JSON.разобрать(свойства.рекомендация.данные);
вернуть отмеченный.преобразовать(данные.рекомендация) как строка;
});
```

#humor

Варианты определения пропсов с дефолтными значениями во Vue:

```
// runtime declaration:

const props = defineProps({
foo: { type: String, required: true },
bar: { Type: Number, default: 0 },
});
```

```
// type-based declaration:

const props = withDefaults(defineProps<{
foo: string
bar?: number
}>(), {
bar: 0,
});
```

```
type Variant = "default" | "primary" | "secondary"

const props = defineProps({
variant: {
type: String as PropType,
default: "default"
}
})
```

По задаче выше

Сплэш-скрин (стартовая заставка) значительно улучшает UX. Во Vue он ставится в index.html и отключается в onMounted() App.vue

В рамках задачи понятно, что показать сплэш-скрин в самом начале не проблема, нужно его убрать по условию. То есть, в конце загрузки сайта должно что-то прилететь, что его закроет.

CSS

Например, прилетит стиль (или в конце html файла, или css файла)

.splash\-screen { display: none; }

Ещё вариант подсказали в комментариях - через :has(). Возможны и другие способы.

HTML

Интересней с HTML. Для этого можно использовать Declarative Shadow DOM (часть Web Components), который позволяет строить Shadow DOM без JS. У Shadow Root есть слоты. Слот будет показывать дефолтное значение ( в нашем случае блок на весь экран с лоадером), пока не прогрузится <div slot="splash\-screen">, который его затрет.

```

```

#challenge #css #html

Задача:

Есть тяжелый сайт. Надо для хорошего UX показать какой-нибудь сплэш-скрин (глобальный прелоадер) в самом начале и отключить его после загрузки всех (по возможности) ресурсов и готовности сайта

Как это сделать без JS?

Задача имеет минимум два решения - через CSS и через HTML

#challenge #css #html

CSS3 не позволяет использовать конкатенацию при нестинге классов:

.title { /* не работает */ &\-\-red { color: red; } }

но для любителей BEM есть обходной путь:

.title { & [class*='\-\-red'] { color: red; } }

#css #bem