Как обратиться к конкретному элементу вложенному в кастомный тег в JS?

Question

[George196]

У меня есть код и мне нужно получить доступ к тегу a с id "logo" . Но при попытке использовать document.getElementById("logo") я не получаю ничего. У меня есть мысль, что это как-то связанно с кастомным тегом, кто подскажет, как решить эту задачу? :)

<spline-viewer> 
  <div id="container">
	<a id="logo" href="..." style="display: flex;"><span></span><svg width="89" height="13" viewBox="0 0 89 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="..." fill="white"></path></svg>
	</a>
  </div>
</spline-viewer>

Comments

[Сергей Соколов]

Можете привести минимальный пример, иллюстрирующий проблему?

[VoidVolker]

George196 код в студию в песочнице JSFiddle/Codepen в соответствующем теге.

[alexalexes]

Можно только привести гипотезы:
1. У вас 2 элемента с одинаковым id на странице - стандартный метод getElementById будет вести себя неоднозначно в разных браузерах. Хоть 2 одинаковых id недопустимы по стандарту в одном документе, но такую ситуацию можно обработать через querySelectorAll.
2. Выполнение кода идет раньше появления целевого тега - возможно, появление блока связано с определенным событием, которое еще не произошло.
3. Искомый тег находится внутри iframe - js из основной страницы не имеет доступа к содержимому iframe.

Answer 1

[Andrew Cossack]

const splineViewer = document.querySelector("spline-viewer");

// Проверяем, есть ли Shadow DOM у элемента
if (splineViewer.shadowRoot) {
    const logo = splineViewer.shadowRoot.querySelector("#logo");
    console.log(logo); // Должно вывести ссылку <a id="logo">
} else {
    console.log("Shadow DOM не найден");
}

Попробуйте найти теневой корень (shadowRoot) внутри
Что делать, если shadowRoot возвращает null?
Некоторые веб-компоненты используют закрытый Shadow DOM (mode: "closed"), и в этом случае вы не сможете получить доступ к shadowRoot. Решения:
Проверить документацию к — возможно, есть публичные API для доступа к содержимому.
Использовать MutationObserver, если элемент появляется позже (например, загружается асинхронно).
Если у вас есть контроль над , попробуйте использовать mode: "open" при создании Shadow DOM.