Що таке #shadow-root в інспекторі HTML-сторінки?

Повне пояснення

1. Що це і навіщо. #shadow-root – внутрішній контейнер Shadow DOM, що ізолює компонент. Він дозволяє розробникам створювати самодостатні UI‑блоки, не турбуючись про вплив зовнішніх стилів.

2. Ключові принципи, терміни, інваріанти.

   • Shadow DOM – технологія Web Components.
   • Відкритий (open) чи закритий (closed) режим доступу до #shadow-root.
   • Внутрішні елементи не впливають на глобальний CSS, а навпаки – зовнішні стилі не проникають.

3. Як це працює (життєвий цикл, алгоритм). При створенні елемента з атрибутом attachShadow({mode:'open'}) браузер створює #shadow-root. У ньому рендериться вміст, а під час пошуку стилів застосовується Shadow DOM CSS‑scoping.

4. Практика і реалізація (React/Next.js). У React можна створити кастомний компонент, що використовує useRef і attachShadow. Приклад:

   const MyComp = () => {
     const ref = useRef<HTMLDivElement>(null);
     useEffect(() => {
       if (ref.current) ref.current.attachShadow({mode:'open'}).innerHTML = '<p>Hello</p>';
     }, []);
     return <div ref={ref} />;
   };
   

5. Тестування. Для тестів з Shadow DOM використовуйте @testing-library/dom і методи getByText, які працюють через ShadowRoot.

6. Оптимізація продуктивності.

   • Уникайте надмірного використання слідування стилів (CSS cascade) всередині Shadow DOM.
   • Кешуйте створений ShadowRoot, щоб не повторювати його при кожному рендері.

7. Accessibility.

   • Внутрішні елементи Shadow DOM мають бути доступними через ARIA‑атрибути.
   • Переконайтеся, що клавіатурна навігація працює всередині компоненту.

8. Безпека та валідація.

   • Внутрішні скрипти не мають доступу до глобального window, що зменшує ризик XSS.
   • Перевіряйте вміст перед вставкою у ShadowRoot.

9. Типові помилки й edge cases.

   • Забудьте про mode:'closed' – тоді доступ до ShadowRoot через JavaScript неможливий.
   • Якщо компонент використовується в старих браузерах, слід забезпечити polyfill.

10. Cheatsheet + можливі follow‑up питання.

• Як отримати доступ до елементу всередині ShadowRoot? – shadowRoot.querySelector().
• Чому стилі не проникають у Shadow DOM? – через CSS‑scoping.
• Які альтернативи Shadow DOM? – iframe, slot (частина Web Components).