クラスの中からカスタム要素の次の兄弟にアクセスする方法は？

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はnullになります。

誰もそれを行う方法を知っていますか？ this.nextElementSiblingを呼び出す方法、thisで本当に兄弟を持つカスタム要素を表すとき

おかげ

Answer 1

は、実際にそれが動作します。矢印機能のおかげで、これはカスタム要素を指し、ので

それは、この例では動作します：あなたはfunction()構文を使用している場合

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> 
 
\t \t <button>Get Sibling</button> 
 
</template>

を、この意志は<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> 
 
\t \t <button>Get Sibling</button> 
 
</template>