input.closest()无法识别自定义元素标签，如何获取父级自定义元素？

以下是几种可行的方案，帮你获取input最近的game-card父元素：

1. 确认自定义元素已正确注册 #

如果game-card未通过customElements.define()完成注册，浏览器会将其视为未知元素，导致标签名选择器失效。先检查注册代码是否正确执行：

class GameCard extends HTMLElement {
  // 自定义元素逻辑
}
customElements.define('game-card', GameCard);

2. 改用属性选择器 #

给game-card元素添加一个唯一标识属性，比如data-component="game-card"，然后通过属性选择器调用closest()：

const card = input.closest('[data-component="game-card"]');

3. 手动遍历DOM树 #

如果上述方法仍不生效，可以手动向上遍历父节点，直到找到目标元素：

function getClosestGameCard(el) {
  let current = el.parentElement;
  while (current) {
    if (current.tagName.toLowerCase() === 'game-card') {
      return current;
    }
    current = current.parentElement;
  }
  return null;
}

const card = getClosestGameCard(input);

内容的提问来源于stack exchange，提问作者iKingNinja