如何從類中訪問自定義元素的下一個同級？

Question

在Web組件中，我有一個自定義元素，並且我想訪問下一個同級元素。 我怎樣才能做到這一點？ 我有這個

class DomElement extends HTMLElement {
    constructor() {
        super();
        let shadowRoot = this.attachShadow({mode: 'open'});
        const t = document.currentScript.ownerDocument.querySelector('#x-foo-from-template');
        const instance = t.content.cloneNode(true);
        shadowRoot.appendChild(instance);
    }

    fixContentTop() {
        var sibling = this.nextElementSibling;
        if (sibling) {

        }
    }
}

但sibling變為空。

Des有人知道怎么做嗎？

謝謝

Answer 1

實際上，在調用this.nextElementSibling的方法中， this確實表示具有同級元素的自定義元素。

它在此示例中有效，因為感謝arrow函數，它引用了自定義元素：

 customElements.define('dom-elem', class extends HTMLElement { constructor() { super() var sh = this.attachShadow({mode: 'open'}) sh.appendChild(document.querySelector('template').content.cloneNode(true)) sh.querySelector('button').onclick = () => console.log('sibling = %s', this.nextElementSibling.localName) } }) 

 <dom-elem></dom-elem> <dom-elem></dom-elem> <template> <button>Get Sibling</button> </template> 

如果使用function ()語法，則它將引用<button> ，因此不會返回任何同級元素：

 customElements.define('dom-elem', class extends HTMLElement { constructor() { super() var sh = this.attachShadow({mode: 'open'}) sh.appendChild(document.querySelector('template').content.cloneNode(true)) sh.querySelector('button').onclick = function () { console.log('sibling = %s', this.nextElementSibling) } } }) 

 <dom-elem></dom-elem> <dom-elem></dom-elem> <template> <button>Get Sibling</button> </template>