Про Shadow DOM

    Всем привет!

    Продолжаю свой цикл публикаций о группе стандартов Web Components. Моя цель - сформировать реалистичные ожидания от данного набора технологий, а также, вместе с вами, прийти к более четкому пониманию того, где их не стоит применять, и где, напротив, ничего лучше еще не придумано. На этот раз, предлагаю подробнее остановится на Shadow DOM.

    Начнем с азов, чтобы те из нас, кто пока не сталкивался с предметом обсуждения, не потеряли интерес к основной части статьи. Итак, Shadow DOM - это часть современного DOM API, которая позволяет создавать изолированные участки документа, со своей собственной внутренней разметкой и своими собственными стилями. Если вы откроете, с помощью инструментов разработчика в браузере, структуру документа, содержащего, к примеру, стандартный HTML-элемент audio - вы увидите в его составе область, обозначенную как #shadow-root и какую-то разметку внутри. Это и есть Shadow DOM элемента audio. Как видите, мы можем столкнуться с "теневыми" участками документов в приложениях и на страницах сайтов, даже если при их создании никак не использовались веб-компоненты или основанные на них библиотеки. Это утверждение справедливо для всех стандартных браузерных UI-примитивов, таких как кнопки, селекты, инпуты и т. д. Хорошая новость в том, что теперь у нас есть возможность создавать собственные универсальные элементы, подобные встроенным браузерным. И Shadow DOM, в данном случае, это ответ на вопрос "как?".

    Какие основные вопросы решает Shadow DOM?

    1. Инкапсуляция. Внутри Shadow DOM создается отдельный "поддокумент", к которому можно применять свои стили, экранированные от воздействий внешней среды (вам не нужно писать многоэтажные имена классов, чтобы обезопасить ваш элемент или внешний документ от "протечек") и где создается свой контекст для методов DOM API, где, к примеру, с помощью селекторов можно получить только те элементы которые находятся внутри и остаются почти невидимыми снаружи (при этом, допустимо использование одинаковых ID у элементов в разных контекстах, без опасности все поломать).

    2. Композиция. Shadow DOM дает вам контроль над "размещением" непосредственных потомков сложного DOM-элемента в нужных местах его внутренней разметки. В этом случае, Shadow DOM выступает в роли некоего шаблона, в котором можно размещать содержимое в местах, обозначенных специальным тегом - slot. Это дает возможность, к примеру, создавать элементы-лейауты и повторно использовать их.

    У тех, кто уже имел дело с библиотеками, основанными на веб-компонентах (такими как LitElement), могло сформироваться ложное впечатление о том, что Shadow DOM - это неотъемлемая часть любого веб-компонента. Это не так. Вы можете создавать компоненты с помощью стандарта Custom Elements и НЕ использовать Shadow DOM при этом, и напротив, создавать теневой DOM у обычных элементов, таких как старый добрый div. Теневой DOM открывает довольно интересные и нетривиальные возможности, например, когда вы динамически добавляете CSS-свойства к элементу через интерфейс "element.style", у вас нет возможности определить псевдоклассы и псеводоэлементы, а также, использовать media-запросы или создавать ключи анимации. Это большой недостаток модели работы со стилями через JavaScript в современных браузерах (работа в этом направлении ведется, но это отдельная сложная тема). Все меняет Shadow DOM:

    let myElement = document.createElement('div');
    myElement.attachShadow({
      mode: 'open',
    });
    myElement.shadowRoot.innerHTML = /*html*/ `
    <style>
    :host {
      padding: 10px;
    }
    :host(:hover) {
      color: red;
    }
    </style>
    <slot></slot>
    `;

    Теперь у нашего div есть реакция на наведение мыши при том, что мы не создавали для этого никаких классов и не вносили никаких изменений во внешние стили. Shadow DOM дает нам доступ к своему элементу-контейнеру через селектор :host, и используя этот селектор, мы можем создавать любые сложные стили для элемента в JS. Прошу принять во внимание, что код приведенный выше, написан исключительно для демонстрации самого принципа, в бою все может выглядеть немного иначе.

    Когда стоит применять Shadow DOM?

    Думаю, основными областями применения можно считать те-же, что и для веб-компонентов в целом: для создания встраиваемых виджетов и UI-библиотек-агностиков, минимально зависимых от конкретных мета-платформ, экосистем и фреймворков. Везде, где важна инкапсуляция, возможность спрятать "под ковер" реализацию и удобная независимая композиция.

    Модные микрофронтенды также являются интересной областью для применения возможностей Shadow DOM.

    Также, можно рассмотреть вариант применения в случаях, когда вам необходимо внедрить свое локальное решение в большой и неповоротливый проект с кучей легаси-кода, в котором можно закопаться неоправданно надолго и есть опасность сломать что-то неочевидное: изоляция участка может оказаться быстрым и эффективным решением.

    Вялотекущий рефакторинг сложной системы тоже можно проводить через создание "островков безопасности".

    Какие могут возникнуть сложности?

    Следует понимать, что Shadow DOM в отдельности, НЕ решает вопрос контроля жизненного цикла ваших компонентов и инициализации компонентов во внешней среде (помните, для этого есть Custom Elements).

    Shadow DOM в документе может быть создан только через JavaScript, а потому, вы не сможете напрямую использовать предварительный рендер (SSR) для внутренней разметки. Данное ограничение можно обойти, но это отдельный непростой разговор.

    В случае, если на сайте используется CSP (Content Security Policy) - вы будете ограничены в выборе способов добавления стилей для элементов внутри теневого DOM. Любая попытка парсить стили из строки вызовет ошибку. Не будет работать ни innerHTML, ни insertRule, ничто иное в этом роде. Самое простое и быстрое решение, но, на мой взгляд, наименее красивое - CSP-флаг unsafe-inline. Если вы создаете виджет для интеграции его на сторонний сайт, рекомендовать пользователям использование небезопасных настроек - это не комильфо. Для браузеров на основе Chromium, выходом может быть использование adoptedStylesheets. Более универсальными решениями будет создание динамических стилей через element.style (что, как писалось выше, имеет свои ограничения), либо добавление в Shadow DOM внешнего файла стилей:

    let myElement = document.createElement('div');
    myElement.attachShadow({
      mode: 'open',
    });
    myElement.shadowRoot.innerHTML = /*html*/ `
    <link rel="stylesheet" href="styles.css">
    <slot></slot>
    `;

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

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

    Вывод

    Shadow DOM - мощная и гибкая технология. Ее использование может существенно облегчить решение многих задач и открывает простор для творчества в решении задач нетипичных. Но не ждите от нее волшебного ответа на все свои вопросы и полного отсутствия сложностей.

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

      +1
      Если ты глубоко в теме, попробую задать сложный вопрос.
      Есть пустой div со скролом, при добавление элементов в спецификации html\js заложено, что скрол будет прижат вверх.
      Понятно что после «рендеринга» можно с помощью js сказать скролу иди в центр, но вопрос таков:
      Можно ли с помощью этого shadow dom фиксировать перед добавлением элементов «скрол оставайся по центру даже если будут добавляться элементы»?
        +4

        Считаю себя человеком, который собаку съел по части скролла.


        Короткий ответ: фиксировать положение скролла можно только с помощью JS. Чтобы скролл оставался всегда по центру нужно каждый раз пересчитывать его положение при добавлении элементов.


        Разные браузеры по разному отрабатывают сценарий изменения положения скролла при добавлении элементов в див со скролом. Например гугл хром пытается сохранить положение скролла на том же уровне при добавлении элементов, а фаерфокс при этом этого не делает (возможно информация уже не совсем актуальна). Спецификация не описывает этот случай поэтому решение остается на усмотрении разработчиков браузеров.

        +3

        Я столкнулся с веб разработкой где-то в 2002 году и уже тогда все ждали смерти некробраузеров, тогда это был IE 6. Прошло 18 лет и у меня для вас плохие новости :)

          +1

          Ну, IE6-то умер...

            0
            IE6 то умер, а проблемы с некробраузерами остались, просто роль этих браузеров теперь может выполнять старинный хром на андроиде. Теперь боремся не с quirks mode из IE6, а с особенностями поведения скрола между огнелисом и хромом. Браузеры другие, задачи другие, проблемы те-же.
              +3
              Вместо него теперь сафари
              +2
              Я свой первый сайт на заказ cделал в 98-м. Тогда IE никто не хоронил, и сайты делались именно под IE. А сейчас, в своей работе я полностью отказался от поддержки IE и никак от этого не страдаю. IE — умер, нужно лишь хорошенько закопать труп. Лопаты — в наших руках. Активное участие в похоронах сейчас принимает и сам Microsoft, за что спасибо им. Так что, эти «плохие новости» точно не для меня )
                0

                Есть своего рода полифил shadow dom’а. Работает в ie))
                https://m.habr.com/ru/post/259187/

                  +2
                  Плохие новости были бы в том, если бы IE6 не умер.
                    0

                    Мне один китаец как-то жаловался именно на то что у них IE6 все еще живет, по крайней мере в виде требований от заказчиков… Хотя последние время у них вектор инета конечно изменился к мобилкам и weechat'ам сильно.

                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                Самое читаемое