\n\n\n```\n\n### 4. Shadow DOM (Web Components)\n\n**Shadow DOM** создаёт истинную инкапсуляцию с собственной областью видимости:\n\n```javascript\nclass MyElement extends HTMLElement {\n constructor() {\n super();\n this.attachShadow({ mode: \"open\" });\n }\n\n connectedCallback() {\n // Переменные в shadow root НЕ видны за его пределами\n this.shadowRoot.innerHTML = `\n \n
Shadow DOM content
\n `;\n }\n}\n\ncustomElements.define(\"my-element\", MyElement);\n```\n\n```html\n\n\n\n
\n
This is red
\n```\n\n### 5. Context API в React\n\n**Context** — способ разделить видимость между компонентами без props drilling:\n\n```javascript\n// ThemeContext.js\nconst ThemeContext = React.createContext(\"light\");\n\n// Provider\nfunction AppWithTheme() {\n const [theme, setTheme] = React.useState(\"light\");\n\n return (\n
\n {/* Header может доступить к theme */}\n {/* Main может доступить к theme */}\n \n );\n}\n\n// Consumer\nfunction Header() {\n const { theme, setTheme } = React.useContext(ThemeContext);\n // theme видна здесь благодаря контексту\n return
{theme}
;\n}\n```\n\n### 6. Module Scope vs Component Scope\n\n```javascript\n// utils.js\nexport const helper = \"shared\"; // Видна всему приложению\n\nconst privateUtil = \"secret\"; // Видна только в этом модуле\n```\n\n```javascript\n// ComponentA.js\nimport { helper } from \"./utils.js\";\n// helper видна\n\n// privateUtil НЕ видна (не экспортирована)\n```\n\n### 7. Closure и стейт-хуки\n\n```javascript\nfunction Counter() {\n const [count, setCount] = React.useState(0); // Замкнутая в компоненте\n\n // Каждый render — новое замыкание, но с правильным count\n React.useEffect(() => {\n const timer = setTimeout(() => {\n console.log(count); // Видит свежее значение count\n }, 1000);\n return () => clearTimeout(timer);\n }, [count]); // Зависимость от count\n\n return
;\n}\n```\n\n## Сравнение видимости\n\n| Уровень | React | Vue | CSS Modules | Shadow DOM |\n|---------|-------|-----|-------------|------------|\n| **Глобальный** | Экспорт модуля | Глобальный объект | Нет | Нет |\n| **Модульный** | Экспорт модуля | Модульная область | Нет | Нет |\n| **Компонент** | Функция компонента | Template + script | Yes | Yes |\n| **Стили** | Глобальные/Tailwind | `