ответ выше.
— асинхронность.
— задержка в ~200ms.
— нерациональное использование памяти.
— необходимость в куче дополнительного кода при необходимости изменить стили для всех активных приложений.
20 активных приложений будут иметь 20 копий css в памяти, загрузка каждого css из кеша браузера и парсинг займет ~200ms в зависимости от размера css. Ну и к тому же операция загрузки css асинхронная, а adoptedStyleSheets = нет.
Про кеширование имелось ввиду не css, а запущенные микроприложения не выгружаются при переходе из одного в другое.
Ну и нагородить, конечно же, можно всякого, но исходя из принципа — делать как можно проще — adoptedStyleSheets это хороший инструмент в умелых руках ))
Нативная поддержка в Safari и Firefox отсутствует, но видимо coming soon, ибо стандарт принят консорциумом и активно развивается.
adoptedStyleSheets это не только хром, к тому же есть полифил.
через тег линк — это прекрасно, но перформанс страдает это раз, количество копий css при большом количестве приложений это два, особенно если приложения пользуют один и тот же модуль, например от ui библиотеки и их надо кешировать.
Отсутствие возможности управлять css из хоста для всех приложений сразу ну итп.
CSS прекрасно можно заинжектить в shadowRoot с помощью constructable StyleSheets.
shadowRoot.adoptedStlyleSheets = ['adoptedCss1', 'adoptedCss2'], перезагрузки из кеша бразуера не будет, и плюсом это ссылка а не копия.
А если у вас только vue — смотрите webpack 5 + Module Federation
Фонты через new FontFace().
куча времени и кода было бы сэкономлено )
Интересно почитать ваш опыт. Насколько я понимаю, работать с разными фреймворками не получится, это для монофрейморкового микрофронтенда
— асинхронность.
— задержка в ~200ms.
— нерациональное использование памяти.
— необходимость в куче дополнительного кода при необходимости изменить стили для всех активных приложений.
Jedem das seine.
20 активных приложений будут иметь 20 копий css в памяти, загрузка каждого css из кеша браузера и парсинг займет ~200ms в зависимости от размера css. Ну и к тому же операция загрузки css асинхронная, а adoptedStyleSheets = нет.
Про кеширование имелось ввиду не css, а запущенные микроприложения не выгружаются при переходе из одного в другое.
Ну и нагородить, конечно же, можно всякого, но исходя из принципа — делать как можно проще — adoptedStyleSheets это хороший инструмент в умелых руках ))
Нативная поддержка в Safari и Firefox отсутствует, но видимо coming soon, ибо стандарт принят консорциумом и активно развивается.
через тег линк — это прекрасно, но перформанс страдает это раз, количество копий css при большом количестве приложений это два, особенно если приложения пользуют один и тот же модуль, например от ui библиотеки и их надо кешировать.
Отсутствие возможности управлять css из хоста для всех приложений сразу ну итп.
shadowRoot.adoptedStlyleSheets = ['adoptedCss1', 'adoptedCss2'], перезагрузки из кеша бразуера не будет, и плюсом это ссылка а не копия.
А если у вас только vue — смотрите webpack 5 + Module Federation
Фонты через new FontFace().
куча времени и кода было бы сэкономлено )