У Shadow DOM не было способа отрендериться на сервере. Не «трудно», а структурно отсутствовало: сколько ни настраивай серверный рендер, веб-компонент уезжает клиенту пустой коробкой и наполняется, только когда доедет и отработает JavaScript.
Увидеть это можно за минуту: curl по собственной странице с аккордеоном или табами и поиск по тексту изнутри компонента. В ответе кастомный элемент без содержимого и тег
<template> рядом, который ничего не делает. На медленном соединении пользователь видит ту же пустую коробку, которая потом схлопывается.Поэтому и привычные лечения мимо: инлайн критического CSS не спасает, ведь содержимое теневого дерева не «без стилей», его вообще нет. Что теперь писать в разметке, показано в разборе.
#фронтенд
