javascript - 仅当元素不是另一个元素的子元素时才选择该元素

Question

我目前正在开发 Web 组件转发器，当我尝试在同一元素中混合使用两个转发器时遇到了问题。我的 HTML 是:

<company-repeat id="table">
    <table class="selectable" description="Résultats de recherche">
        <thead>
            <tr>
                <company-repeat id="table-metadata">
                    <th class="sorting" repeatable>${name}</th>
                </company-repeat>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr repeatable>
                <td>${id}</td>
                <td>${name}</td>
                <td>${surname}</td>
                <td>${registered}</td>
                <td><i aria-hidden="true" class="fa fa-download" title="Télécharger">D</i></td>
            </tr>
        </tbody>
    </table>
</company-repeat>

我想做的是根据收到的列表动态生成 thead，但问题是我的代码采用了它找到的第一个“可重复”元素 (this.template = this.querySelector(' [可重复]');)。我现在需要的是一个选择器，用于指定我想要它找到的第一个元素，前提是它不是另一家公司的 child - 重复。

它是否只适用于选择器，还是我必须全部检索它们，检查该元素是否是另一个元素的子元素，然后只将它设置为我的属性？

像 document.querySelector('!company-repeat > [repeatable]'); 这样的东西会很完美，但我非常怀疑它是否存在。

Answer 1

Is it doable only with a selector...

很遗憾，没有。没有“选择 X，但前提是 X 不是 Y 的后代”。 (一个人被 :not 伪类所吸引，但它只允许简单的选择器，而不是我们为此需要的复合类型。)

...or do I have to retrieve them all, check if the element is child of another element and then only set it to my property?

是的，这就是您需要使用的方法。