Как получить доступ к следующему брату пользовательского элемента из класса?

Question

В веб-компонентах у меня есть пользовательский элемент, и я хочу получить доступ к следующему брату. Как я могу это сделать? у меня есть это

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 становится нулевым

Кто-нибудь знает, как это сделать?

Спасибо

Answer 1

На самом деле это работает, когда в методе, который вызывает this.nextElementSibling, this действительно представляет пользовательский элемент, который имеет родного брата.

В этом примере это работает, потому что благодаря функции стрелки это относится к пользовательскому элементу:

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>