Блог

Главная - Вопросы по программированию - Попросите Svelte добавить стиль внутри теневого dom

Попросите Svelte добавить стиль внутри теневого dom

#svelte #shadow-dom

#стройный #shadow-dom

Вопрос:

Предполагается, что мое приложение svelte будет отображаться внутри теневого элемента. Это работает, но все стили добавляются в заголовок внешнего документа. Я пытался создать HTML-элемент в теневом dom, но стили по-прежнему добавляются в заголовок внешнего документа.

Есть ли какой-нибудь способ сообщить Svelte, куда добавлять стили? Наличие стилей во внешнем файле не является вариантом в моем случае использования.

На изображении показан стиль во внешнем заголовке и нет стиля в теневом корне.

Представление DOM

Обходной путь

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

 const outerHead = document.getElementsByTagName('head')[0]
const config = { attributes: false, childList: true, subtree: false }
const callback = function (mutationsList, observer) {
mutationsList.forEach(mutation => {
     mutation.addedNodes.forEach(n => shadowHtml.getElementsByTagName('head')[0].appendChild(n))
     })
}
const headObserver = new MutationObserver(callback);
headObserver.observe(outerHead, config);

Комментарии:

1. Можете ли вы заставить Svelte создать open shadowRoot? Затем вы можете переместить его самостоятельно (на стороне клиента)

2. Сегодня (или несколько месяцев назад, когда я проверял в последний раз) таблицы стилей в shadow DOM не могут быть в каждом браузере. Итак, вам нужно добавить строку стиля через JS. Кроме того, я попытался использовать «обычное» (в отличие от сборки CustomElement) приложение Svelte в теневом DOM, и это вроде сработало. Но на самом деле не полностью. Например, переходы были нарушены. Определенно не то, что я бы рекомендовал, в настоящее время :-/

3. Если я вручную скопирую стили из внешнего заголовка в теневой DOM, стиль будет выглядеть правильно. Так что, если бы я мог сказать svelte, куда добавлять стили, все бы сработало. С открытым теневым DOM я мог бы переместить их, как только они будут добавлены. Но это кажется довольно сложной задачей.

4. Возможно, вас заинтересует этот шаблон github.com/stefanonepa/svelte-component-ts Это взлом, но он позволяет вам обернуть стройное приложение в пользовательский элемент со встроенными стилями и переходами из стройного…