javascript - 如何从类中访问自定义元素的下一个兄弟？

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变为空。

有没有人知道怎么做？

谢谢

Answer 1

实际上它在调用的方法中起作用this.nextElementSibling，this真正代表具有兄弟的自定义元素。

它在此示例中有效，因为借助箭头函数， 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>