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

Question

[[a] user]

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

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>
      `;
    };
  });
};

Comments

[szQocks]

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

<script>
customElements.define('custom-header', class extends HTMLElement {
  connectedCallback() {
      const shadow = this.attachShadow({mode: "open"});
      shadow.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>
      `
      
  }
});
</script>

<custom-header></custom-header>

Answer 1

[Антон Шаманов]

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

Comments

[[a] user]

Там видно только текст и больше ничего нет

[Антон Шаманов]

[a] user, https://disk.yandex.ru/i/h_bijgLO124Hpw