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

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

0 голосов
/ 03 июня 2019

ОБНОВЛЕНИЕ : https://github.com/Polymer/polymer/issues/5551 - они используют shadyDom

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

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

enter image description here

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

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

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

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

1 Ответ

1 голос
/ 13 июня 2019

Возможно, они используют это:

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

выделение:

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

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

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

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

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

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

Что касается стиля в элементе управления, теперь вы можете сделать: 

static get styles() {
    return css`
        :host {
            display: block;
            height: 100%;
        }
        .boxing rect {
            x: -24;
            y: -14;
            width: 48px;
            height: 28px;
            rx: 8;
            ry: 8;
        }
        .copia rect.text {
            width: 135px;
            height: 30px;
            stroke:blue;
            stroke-width: 1px;
        }

        text {
            font-size: 20px;
            font-family: Arial;
        }

        ${miGestorEstilos.getDibujaGafa()}
        ${miGestorEstilos.getDibujaForma()}
    `
}

Обратите внимание, что эта функция может быть общей для всех модулей и может быть совмещена с другими функциями, возвращающими также "CSS"

...