Question

我尝试使用自定义元素API为游戏内浏览器引擎用于显示按钮等的自定义元素创建各种填充。但是，我似乎无法从构造函数中访问元素的属性（例如，src，href ...）。

以下是一个例子：

＆＃13;

class KWButton extends HTMLElement {
  constructor() {
    super();
    var attributes = this.attributes;
    var shadow = this.attachShadow({
      mode: 'open'
    });
    var img = document.createElement('img');
    img.alt = this.getAttribute('text'); // the getAttribute call returns null
    img.src = this.getAttribute('src'); // as does this one
    img.width = this.getAttribute('width'); // and this
    img.height = this.getAttribute('height'); // and this
    img.className = 'vivacity-kwbutton'; // this works fine
    shadow.appendChild(img);
    img.addEventListener('click', () => {
      window.location = this.getAttribute('href'); // this works perfectly fine
    });
  }
}
customElements.define('kw-button',
  KWButton);

＆＃13;

<kw-button src="https://placekitten.com/g/198/39" width="198" height="39" icon_src="https://placekitten.com/g/34/32" icon_width="34" icon_height="32" href="https://placekitten.com/" text="placekiten" color="#ffffff" size="18"></kw-button>

＆＃13;

Answer 1

您无法访问querySelector()和appendChild()的元素DOM树，以及getAttribute()中setAttribute()和constructor()的属性。

这是因为在调用constructor()时，自定义元素还没有内容。

您应该在connectedCallback()方法中推迟，并且没问题。

来自the specs：

元素不得获得任何属性或子元素，因为这违反了使用createElement或createElementNS方法的消费者的期望。

通常，应尽可能将工作推迟到connectedCallback

Answer 2

虽然我发誓我曾经看过那个规格（@Supersharp 提到的那个），但现在：

检查属性是允许的（适用于 Chrome、Firefox 和 Safari），所以 getAttribute 是可以的
属性的突变，正如预期的那样，是被禁止的

好吧，也许我们确实应该将“增益”理解为特指突变。

可以说 - 等等，但如果元素无法获得任何属性 - 显然没有什么可检查的。好吧，以下代码段对我有用（在任何浏览器上）：

class A extends HTMLElement {
  constructor() {
    super();
    console.log(this.getAttribute('data-some'));
  }
}

globalThis.customElements.define('x-a', A);

const e = document.createElement('x-a');
// console: null

const t = document.createElement('div');
t.innerHTML = '<x-a data-some="test"></x-a>';
// console: test

CodePen

无法从其构造函数访问自定义元素的属性

2 个答案: