获取最接近的父级（自定义元素）

Question

我有一个自定义元素，其中的输入元素不是一年级的孩子。我想从输入中获取父自定义元素，我尝试使用

input.closest()

但它不适用于自定义元素标签名称

const card = input.closest("game-card");

我需要获取第一个父级，即游戏卡，那么有没有办法使用自定义元素来做到这一点？

Answer 1

let inputEl = document.querySelector('#test');
console.log(inputEl)
console.log(inputEl.closest('game-card'));

<game-card>
  <first-level>
    <second-level>
      <input id="test" />
    </second-level>
  </first-level>
</game-card>
Running this will log to console, the closest game-card

Answer 2

最接近的方法参数是： 如果自定义父元素有 id='game-card'，则使用 '#game-card' 或者 如果自定义父元素有 class='game-card'，则使用 '.game-card'。

您的问题将会得到解决。

Answer 3

<game-card>
  <first-level>
      <template shadowrootmode="open">
        <input placeholder="click me"
               onclick="console.log(this.closest('game-card'))">
      </template>
  </first-level>
</game-card>

closest( )

不逃避shadowRoots，所以你必须递归地“沿着DOM”走才能得到你想要的节点。

在 SO 问题/答案中进行了探索和记录：
自定义元素 getRootNode.closest() 函数跨越多个（父）shadowDOM 边界