3. Финальный коммит: Беру лучший вариант эскиза и делаю полный рефакторинг в Procreate: исправляю анатомию, добавляю смыслы, свет и свою авторскую магию.

Нейросеть для меня — это не соавтор, а мощный npm-пакет для генерации идей и референсов. Он не пишет за меня весь код, но ускоряет разработку в разы.

Я осознанно выбираю технологии, которые резонируют с моей задачей. Даже здесь работает принцип — нужен правильный инструмент под задачу. Где-то чистый ручной труд, а где-то — `await generateInspiration()`.

А теперь извините, мне нужно допилить очередной спринт по отрисовке летящих фей! Эскизов уже больше 60, и это только начало! 🧚‍♀️

Для решения этой проблемы и существует Shadow DOM (теневой DOM).

По своей сути, Shadow DOM — это «DOM внутри DOM». Это скрытое дерево элементов, которое прикрепляется к обычному элементу на странице (называемому «хостом»), но при этом оно изолировано от основного DOM. Оно позволяет разработчику создать герметичную границу вокруг внутренней структуры компонента, защищая его от внешнего мира.

Теневой DOM позволяет прикреплять скрытые DOM-деревья к элементам в обычном DOM-дереве. Это теневое дерево начинается с теневого корня (shadow root), под который можно прикреплять любые элементы так же, как и в обычном DOM.

Существует несколько терминов, связанных с теневым DOM, которые следует знать:

• Теневой хост (Shadow host): Обычный узел DOM, к которому прикреплен теневой DOM.

• Теневое дерево (Shadow tree): DOM-дерево внутри теневого DOM.

• Теневая граница (Shadow boundary): Место, где заканчивается теневой DOM и начинается обычный DOM.

• Теневой корень (Shadow root): Корневой узел теневого дерева.

Вы можете воздействовать на узлы в теневом DOM точно так же, как и на обычные узлы. Разница в том, что никакой код внутри теневого DOM не может повлиять на что-либо за его пределами, что обеспечивает надёжную инкапсуляцию.

До того, как теневой DOM стал доступен веб-разработчикам, браузеры уже использовали его для инкапсуляции внутренней структуры стандартных элементов. Например, элемент <video> с элементами управления. Всё, что вы видите в DOM, — это тег <video>, но он содержит ряд кнопок и других элементов управления внутри своего теневого DOM.

Создание теневого DOM

Создавать теневой DOM можно двумя способами: императивно с помощью JavaScript или декларативно прямо в HTML.

Императивно с помощью JavaScript

Этот способ отлично подходит для приложений, рендерящихся на стороне клиента. Мы выбираем элемент-хост и вызываем на нём метод attachShadow().

Результат на странице будет выглядеть так:

Я нахожусь в теневом DOM Я не в теневом DOM

Декларативно с помощью HTML

Для приложений, где важен рендеринг на стороне сервера, можно определить теневой DOM декларативно, используя элемент <template> с атрибутом shadowrootmode.

Когда браузер обработает этот код, он автоматически создаст теневой корень для <div> и поместит в него содержимое тега <template>. Сам тег <template> при этом исчезнет из основного DOM-дерева.

Инкапсуляция: защита от JavaScript и CSS

Главное преимущество Shadow DOM — это изоляция. Давайте посмотрим, как она работает.

Инкапсуляция от JavaScript

Добавим кнопку, которая будет пытаться изменить все элементы <span> на странице.

При нажатии на кнопку текст изменится только у <span>, который находится в основном документе. Элемент внутри теневого DOM останется нетронутым, потому что document.querySelectorAll() не может "заглянуть" за теневую границу.

Доступ к теневому DOM: свойство shadowRoot и работа с вложенностью

Когда мы вызываем host.attachShadow({ mode: "open" }), мы создаём теневой DOM в "открытом" режиме. Это означает, что мы можем получить доступ к его содержимому извне через свойство host.shadowRoot.

Если же указать mode: "closed", свойство host.shadowRoot вернёт null, и доступ к теневому дереву извне будет закрыт. Это не строгий механизм безопасности, а скорее соглашение для разработчиков о том, что внутренности компонента трогать не следует.

Работа с вложенными теневыми деревьями

В сложных компонентных архитектурах один пользовательский элемент может содержать внутри себя другие пользовательские элементы, каждый из которых имеет свой собственный Shadow DOM. Чтобы добраться до элемента в глубоко вложенном теневом дереве, придётся последовательно "проходить" через каждый shadowRoot.

Представим себе такую структуру:

• Компонент <nmbrs-form> (основная форма).

• Внутри него находится <div>, а в нём — компонент <nmbrs-button> (кастомная кнопка).

• Внутри <nmbrs-button> находится настоящая HTML-кнопка <button>.

Чтобы получить доступ к этой кнопке из глобального контекста, путь будет выглядеть так:

SВ виде одной цепочки вызовов это выглядит так:

Такая длинная цепочка наглядно демонстрирует мощь инкапсуляции: чтобы добраться до внутренних деталей, нужно явно пройти через каждую "границу". Это делает код более предсказуемым и защищает компоненты от случайных изменений.

Инкапсуляция от CSS

Стили, определённые на основной странице, не влияют на элементы внутри теневого DOM.

Элемент <span> внутри теневого дерева не получит эти стили. Это решает огромную проблему случайных пересечений и конфликтов CSS.

Применение стилей внутри теневого DOM

Стили, определённые внутри теневого дерева, в свою очередь, не влияют на основную страницу. Есть два основных способа их добавления.

1. Конструируемые таблицы стилей (Constructable Stylesheets)

Этот метод позволяет создавать объект CSSStyleSheet в JavaScript и применять его к одному или нескольким теневым деревьям. Это эффективно, если у вас есть общие стили для множества компонентов.

2. Добавление элемента <style>

Простой и декларативный способ — поместить тег <style> прямо внутрь теневого дерева (часто внутри <template>).

Теневой DOM и пользовательские элементы: идеальное сочетание

Вся мощь теневого DOM раскрывается при создании пользовательских элементов (Custom Elements). Без инкапсуляции они были бы невероятно хрупкими.

Пользовательский элемент — это класс, наследующий HTMLElement. Как правило, сам элемент выступает в роли теневого хоста, а вся его внутренняя структура создаётся внутри теневого дерева.

Вот пример простого компонента <filled-circle>:

Теперь мы можем использовать его в HTML как обычный тег, не беспокоясь о его внутреннем устройстве:

Каждый из этих компонентов будет полностью инкапсулирован и защищён от влияния внешней страницы.

Полезно? Подпишись.
Удачи 🚀

• Основы JavaScript: синтаксис, DOM-манипуляции, асинхронность (Promise, async/await).

• Фреймворки и библиотеки: React.js (самый популярный, востребован в вакансиях), Vue.js (проще для новичков), Angular (используют в корпорациях).

• Дополнительные инструменты: TypeScript (типизированный JS), Next.js/Gatsby (для SSR и статических сайтов).

Результат: сможете создавать сложные SPA (Single Page Applications) и претендовать на позицию Junior Frontend-разработчика.

2. Осваиваем бэкенд: серверная часть
Если вам интересно, как работают базы данных, авторизация и API, можно уйти в бэкенд.

Варианты технологий:

• Node.js + Express (если хотите остаться в JS-экосистеме);

• Python (Django/Flask) — проще синтаксис, много возможностей;

• PHP (Laravel) — популярен в вебе;

• C# (ASP.NET) / Java (Spring) — корпоративный сектор.

Результат: сможете писать серверную логику и стать Fullstack-разработчиком.

3. Идем в дизайн и UX/UI
Если вам нравится не только верстать, но и продумывать интерфейсы, можно развиваться в дизайн:

• Figma/Adobe XD — создание макетов;

• Основы UX — юзабилити, исследования;

• Анимация интерфейсов (CSS/JS, GSAP, Framer Motion).

Результат: сможете работать UI/UX-дизайнером или фронтендером с уклоном в дизайн.

4. Другие направления: мобильная разработка, тестирование, DevOps

• Мобильная разработка: React Native, Flutter, Swift/Kotlin.

• Тестирование (QA): ручное и автоматическое (Selenium, Cypress).

• DevOps: Docker, CI/CD, облачные технологии (AWS, Azure).

Как выбрать направление?
Вместо того чтобы пытаться освоить всt сразу, попробуйте определить, что вам интереснее всего:

• Если вам нравится создавать визуальные элементы, работать с анимацией и интерфейсами, то выбирайте фронтенд.

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

• Если мечтаете: разрабатывать мобильные приложения, работать с современными кроссплатформенными технологиями, то вас может заинтересовать мобильная разработка.

Главное — не останавливаться! После HTML/CSS открывается огромный мир IT, и вы можете найти именно то, что вам по душе.

А что бы выбрали вы? Делитесь в комментариях!