Получение ближайшего родителя, который является пользовательским элементом
У меня есть пользовательский элемент, входной элемент которого не является дочерним элементом первого класса. Я хочу получить родительский пользовательский элемент из входных данных, и я попробовал использовать input.closest(), но он не работает с именами тегов пользовательских элементов.
const card = input.closest("game-card");
Мне нужно получить первого родителя, который является игровой картой, есть ли способ сделать это с помощью пользовательских элементов?
Хорошо, я отредактировал вопрос, и да, вопрос в том, как мне получить собственного родителя.
молодец :) еще вопрос для уточнения; является ли элемент ввода тоже пользовательским элементом? или это буквально <input>?
похоже, что .closest('game-card') работает. когда ты пытаешься сослаться на это? Пользовательские элементы имеют несколько запутанный жизненный цикл, запросы DOM должны выполняться после того, как элемент «подключен»/добавлен в документ.
Я получаю элемент ввода как event.target, а event.target.closest("game-card") возвращает значение null со структурой <game-card><input type = "date"></game-card>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
ближайший параметр метода будет: используйте «#game-card», если пользовательский родительский элемент имеет id='game-card' или используйте «.game-card», если пользовательский родительский элемент имеет класс = «game-card».
ваша проблема будет решена.
Ваш ответ можно улучшить, добавив дополнительную вспомогательную информацию. Пожалуйста, отредактируйте , чтобы добавить дополнительную информацию, например цитаты или документацию, чтобы другие могли подтвердить правильность вашего ответа. Более подробную информацию о том, как писать хорошие ответы, вы можете найти в справочном центре.
Closest() НЕ выходит из ShadowRoot
<game-card>
<first-level>
<template shadowrootmode = "open">
<input
placeholder = "click me"
onclick = "console.info(this.closest('game-card'))">
</template>
</first-level>
</game-card>closest( ) не экранирует ShadowRoots, поэтому вам придется рекурсивно пройти «вверх по DOM», чтобы получить нужные вам узлы.
Изучено и задокументировано в SO Вопрос/Ответ:
Функция пользовательского элемента getRootNode.closest(), пересекающая несколько (родительских) границ ShadowDOM
Вы просто жалуетесь на это или хотите получить ответ на конкретный вопрос? Я вижу здесь два вопроса: «как я могу получить собственный родительский элемент» и «работает ли .closest() с пользовательскими тегами». Жду разъяснений :)