Вопрос:

Использование Shadow Dom в приложении Polymer 3 (пример youtube.com)

polymer

36 просмотра

1 ответ

5710 Репутация автора

Команда Youtube недавно обновила свой код до Polymer 3.x

Если вы зайдете на YouTube и откроете инструменты разработки, вы вообще не увидите тени:

введите описание изображения здесь

Однако, когда вы запускаете новое приложение Polymer 3, теневой дом находится здесь, как это было в предыдущих версиях. введите описание изображения здесь

Есть много дискуссий о том, как здорово будет иметь возможность рендерить определенные компоненты без теневого пространства. Похоже, команда YouTube преуспела в этом.

Shadow dom отлично подходит для разработки компонентов, но страницы, например, не должны рассматриваться как компоненты, ИМХО. Относиться ко всему как к компоненту (с ShadowDom) становится больно - проблемы со стилем, сторонними библиотеками и многим другим.

Мой вопрос: как команда YouTube достигла этого?

Автор: ZuzEL Источник Размещён: 03.06.2019 12:24

Ответы (1)


0 плюса

46606 Репутация автора

Вероятно, они используют это:

ссылка на полимер

Акцент мой:

Настройте инициализацию DOM

Есть несколько моментов, в которых вы можете настроить, как Polymer инициализирует DOM вашего элемента. Вы можете настроить способ создания теневого корня, создав его самостоятельно. И вы можете переопределить метод _attachDom, чтобы изменить способ добавления дерева DOM к вашему элементу: например, чтобы отобразить светлый DOM вместо теневого DOM.

Штамповые шаблоны в светлом DOM

Вы можете настроить метку DOM, переопределив метод _attachDom. Метод принимает единственный аргумент, DocumentFragment, содержащий DOM, который должен быть проштампован. Если вы хотите добавить шаблон в легкую модель DOM, просто добавьте переопределение, например, так:

_attachDom (dom) {this.appendChild (dom); } Когда вы штампуете шаблон DOM для освещения DOM, как это, привязки данных и прослушиватели декларативных событий работают как обычно, но вы не можете использовать функции теневого DOM, такие как и стиль инкапсуляции.

Шаблон, отпечатанный на светлом DOM, не должен содержать никаких тегов. Стили могут применяться с помощью включающего хост-элемента или на уровне документа, если элемент не используется внутри теневого DOM другого элемента.

Автор: vals Размещён: 12.06.2019 09:17
Вопросы из категории :
32x32