Почему не видно содержимого при использовании ShadowDOM?

CSS HTML JavaScript

29 апреля 2026 1 ответ

Не видно контента при использовании Shadow DOM. Начальный код -

export const CustomHeader = () =&gt; {   customElements.define("custom-header", class extends HTMLElement {     connectedCallback() {       this.attachShadow({mode: "open"});       this.innerHTML =        `       &lt;link rel="stylesheet" href="css/Base.css"&gt;       &lt;link rel="stylesheet" href="components/Header/css/Header.css"&gt;       &lt;header class="Header"&gt;        &lt;div class="HeaderBody"&gt;         &lt;a class="Logo waves-effect waves-teal" href="#" data-LogoText="&amp;#123;Finsweet"&gt;&lt;/a&gt;         &lt;input class="HeaderMobileMenuButton" type="checkbox" aria-label="Мобильное меню" data-ToolTip="Мобильное меню"&gt;         &lt;div class="HeaderMenu"&gt;          &lt;nav class="NavigationRow"&gt;           &lt;ul class="ListRow"&gt;            &lt;li class="ListRowItem"&gt;             &lt;a href="#" class="HeaderLink waves-effect waves-light"&gt;&lt;span class="HeaderLinkText"&gt;Home&lt;/span&gt;&lt;/a&gt;            &lt;/li&gt;            &lt;li class="ListRowItem"&gt;             &lt;a href="#" class="HeaderLink waves-effect waves-light"&gt;&lt;span class="HeaderLinkText"&gt;Blog&lt;/span&gt;&lt;/a&gt;            &lt;/li&gt;            &lt;li class="ListRowItem"&gt;             &lt;a href="#" class="HeaderLink waves-effect waves-light"&gt;&lt;span class="HeaderLinkText"&gt;About us&lt;/span&gt;&lt;/a&gt;            &lt;/li&gt;            &lt;li class="ListRowItem"&gt;             &lt;a href="#" class="HeaderLink waves-effect waves-light"&gt;&lt;span class="HeaderLinkText"&gt;Contact us&lt;/span&gt;&lt;/a&gt;            &lt;/li&gt;            &lt;li class="ListRowItem"&gt;             &lt;button class="Button ButtonWhite waves-effect" type="button"&gt;&lt;span class="ButtonText"&gt;Subscribe&lt;/span&gt;&lt;/button&gt;            &lt;/li&gt;           &lt;/ul&gt;          &lt;/nav&gt;         &lt;/div&gt;        &lt;/div&gt;       &lt;/header&gt;       `;     };   }); };

export const CustomHeader = () => { customElements.define("custom-header", class extends HTMLElement { connectedCallback() { this.attachShadow({mode: "open"}); this.innerHTML = ` <link rel="stylesheet" href="css/Base.css"> <link rel="stylesheet" href="components/Header/css/Header.css"> <header class="Header"> <div class="HeaderBody"> <a class="Logo waves-effect waves-teal" href="#" data-LogoText="&#123;Finsweet"></a> <input class="HeaderMobileMenuButton" type="checkbox" aria-label="Мобильное меню" data-ToolTip="Мобильное меню"> <div class="HeaderMenu"> <nav class="NavigationRow"> <ul class="ListRow"> <li class="ListRowItem"> <a href="#" class="HeaderLink waves-effect waves-light"><span class="HeaderLinkText">Home</span></a> </li> <li class="ListRowItem"> <a href="#" class="HeaderLink waves-effect waves-light"><span class="HeaderLinkText">Blog</span></a> </li> <li class="ListRowItem"> <a href="#" class="HeaderLink waves-effect waves-light"><span class="HeaderLinkText">About us</span></a> </li> <li class="ListRowItem"> <a href="#" class="HeaderLink waves-effect waves-light"><span class="HeaderLinkText">Contact us</span></a> </li> <li class="ListRowItem"> <button class="Button ButtonWhite waves-effect" type="button"><span class="ButtonText">Subscribe</span></button> </li> </ul> </nav> </div> </div> </header> `; }; }); };

Дополнительно:

сделай как всё написано в документации, неужели так сложно ? да и прочитать про attachShadow, зачем ты это написал - this.innerHTML ???!

&lt;script&gt; customElements.define('custom-header', class extends HTMLElement {   connectedCallback() {       const shadow = this.attachShadow({mode: "open"});       shadow.innerHTML =        `       &lt;link rel="stylesheet" href="css/Base.css"&gt;       &lt;link rel="stylesheet" href="components/Header/css/Header.css"&gt;       &lt;header class="Header"&gt;        &lt;div class="HeaderBody"&gt;         &lt;a class="Logo waves-effect waves-teal" href="#" data-LogoText="&amp;#123;Finsweet"&gt;&lt;/a&gt;         &lt;input class="HeaderMobileMenuButton" type="checkbox" aria-label="Мобильное меню" data-ToolTip="Мобильное меню"&gt;         &lt;div class="HeaderMenu"&gt;          &lt;nav class="NavigationRow"&gt;           &lt;ul class="ListRow"&gt;            &lt;li class="ListRowItem"&gt;             &lt;a href="#" class="HeaderLink waves-effect waves-light"&gt;&lt;span class="HeaderLinkText"&gt;Home&lt;/span&gt;&lt;/a&gt;            &lt;/li&gt;            &lt;li class="ListRowItem"&gt;             &lt;a href="#" class="HeaderLink waves-effect waves-light"&gt;&lt;span class="HeaderLinkText"&gt;Blog&lt;/span&gt;&lt;/a&gt;            &lt;/li&gt;            &lt;li class="ListRowItem"&gt;             &lt;a href="#" class="HeaderLink waves-effect waves-light"&gt;&lt;span class="HeaderLinkText"&gt;About us&lt;/span&gt;&lt;/a&gt;            &lt;/li&gt;            &lt;li class="ListRowItem"&gt;             &lt;a href="#" class="HeaderLink waves-effect waves-light"&gt;&lt;span class="HeaderLinkText"&gt;Contact us&lt;/span&gt;&lt;/a&gt;            &lt;/li&gt;            &lt;li class="ListRowItem"&gt;             &lt;button class="Button ButtonWhite waves-effect" type="button"&gt;&lt;span class="ButtonText"&gt;Subscribe&lt;/span&gt;&lt;/button&gt;            &lt;/li&gt;           &lt;/ul&gt;          &lt;/nav&gt;         &lt;/div&gt;        &lt;/div&gt;       &lt;/header&gt;       `          } }); &lt;/script&gt;  &lt;custom-header&gt;&lt;/custom-header&gt;

Ответы:

вот тебе пример кастомного элемента https://codepen.io/WinterSilence/pen/VwmVobN можешь сделать на его основе

Там видно только текст и больше ничего нет
[a] user, https://disk.yandex.ru/i/h_bijgLO124Hpw

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Мария Код Ответ

2 мая 2026 в 08:51

ShadowDOM позволяет создавать изолированные DOM деревья, которые не взаимодействуют с основным DOM деревом страницы. Это полезно для создания компонентов или виджетов, которые могут быть встроены в любую страницу без конфликтов стилей и скриптов.

Одной из особенностей ShadowDOM является то, что содержимое внутри него по умолчанию не видно извне. Это сделано для обеспечения изоляции и защиты от внешних воздействий. Поэтому, если вы не видите содержимого при использовании ShadowDOM, это может быть вызвано несколькими причинами.

Первая причина может быть неправильное использование ShadowDOM. Убедитесь, что вы правильно создали ShadowRoot и добавили его к элементу, который должен быть скрыт. Например:

<div id="container"></div>
 
  const container = document.getElementById('container');
  const shadowRoot = container.attachShadow({mode: 'open'});
  shadowRoot.innerHTML = '<p>Содержимое ShadowDOM</p>';

<div id="container"></div> const container = document.getElementById('container'); const shadowRoot = container.attachShadow({mode: 'open'}); shadowRoot.innerHTML = '<p>Содержимое ShadowDOM</p>';

Вторая причина может быть связана с CSS стилями. Убедитесь, что вы правильно настроили стили для элементов внутри ShadowDOM. Если стили не применяются или переопределяются извне, содержимое может быть невидимым. Можно использовать ::slotted() для стилизации содержимого, передаваемого извне.

:host {
  display: block;
  border: 1px solid black;
}
 
::slotted(p) {
  color: red;
}

:host { display: block; border: 1px solid black; } ::slotted(p) { color: red; }

Третья причина может быть связана с JavaScript кодом. Убедитесь, что вы правильно обращаетесь к элементам внутри ShadowDOM и что они добавлены в DOM. Может потребоваться использовать методы querySelector и querySelectorAll для поиска элементов в ShadowDOM.

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

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

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

Веб-разработка Какие особенности разработки сайтов под тор/даркнет? 1 ответ Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ

Почему не видно содержимого при использовании ShadowDOM?

Дополнительно:

Ответы:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно