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实际上代表了有兄弟的自定义元素。

它适用于此示例，因为由于箭头功能，这引用了自定义元素：

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>

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

1 个答案: