Web 组件访问connectedCallBack 中的innerHTML

Question

class Form extends HTMLElement {
    constructor() {
        super()

    }
    connectedCallback() {
        console.log(this)
        console.log(this.innerHTML)

    }
}

customElements.define("my-form", Form);

我现在正在尝试访问innerHTML，如果我在控制台中展开它，innerHTML已设置，但当我尝试

console.log(this)

时，它不会记录任何内容。为什么即使在connectedCallback中我也无法访问我的标签内的任何内容。

最终我想做的是

console.log(this.innerHTML)

但我不能这样做，因为我无法访问元素内的任何内容。

Answer 1

class Form extends HTMLElement {
    constructor() {
        super()
        
    }
    connectedCallback() {
        let inputCounter = 0
        for (let i of this.querySelectorAll("input")) {
            this[inputCounter] = i
            inputCounter++
        }
    }
}

customElements.define("my-form", Form);

在

opening

标签上触发。 这意味着所有

属性

都可以在 Web 组件上使用， 但 NOT
它的子元素位于 lightDOM 中。 最简单的方法是延迟执行，直到事件循环完成，并且您知道 lightDOM 的

more

已被解析。

但是！这将为您提供下一个

N

元素解析，而不是 lightDOM 中的所有元素！ 粗略测试显示大约 N=1000（1000 个 lightDOM 元素）可以安全使用。 但对于复杂的 CPU 消耗元素，您的里程可能会有所不同
也许只是增加到 1 毫秒 setTimeout 延迟

connectedCallback

直到 2021 年春季出现问题时，Mozilla 是最后一个修复此错误的供应商。详情请参阅：

connectedCallback中等待Element Upgrade：FireFox和Chromium差异

PS.

不需要只做

• <script>
  customElements.define("my-form", class extends HTMLElement {
      connectedCallback() {
        setTimeout(()=>{
          let inputCounter = 0
          this.querySelectorAll("input").forEach( (inp,idx) => {
              // this[inputCounter] = idx // this[0] = idx ???
              inputCounter++
          });
          console.log(inputCounter , "inputs");
        });
      }
  });
  </script>
  
  <my-form>
    <input/>
    <input/>
    <input/>
  </my-form>

  的空构造函数，当没有定义时将调用父构造函数。这同样适用于所有回调。

当您只想
• super()

  一个元素

  once

  时，无需定义命名类

Answer 2

define

，而不是依赖事件循环（这在边缘情况下可能会出现问题（我都无法告诉）我的头顶））尝试通过使用一些更复杂的启发式方法来确保子元素可用，例如检查自定义元素是否具有

parsedCallback

（在这种情况下它必须已被完全解析）：

https://github。 com/WebReflection/html-parsed-element

如果您需要

支持像 IE 6-10 这样的旧浏览器

，那么使用超时而不是那些复杂的启发式方法可能会更好。 如果您使用 npm，您可以简单地使用安装它

nextSibling

用法就像

import HTMLParsedElement from 'html-parsed-element';

这个小型存储库是在 github 上的

讨论

之后创建的，其中我贡献了 Andrea Giammarchi（也是著名（且运行良好）自定义元素 polyfill 的作者）发布的内容的蓝图作为

customElements.define(
  'custom-element',
  class extends HTMLParsedElement {
    parsedCallback() {
      this.innerHTML = 'always <strong>safe</strong>!';
      console.log(this.parsed); // always true here
    }
  }
);

// or use as a mix-in
const {withParsedCallback} = HTMLParsedElement;
customElements.define(
  'other-element',
  withParsedCallback(class extends HTMLElement {
    parsedCallback() {
      this.innerHTML = 'always <strong>safe</strong>!';
      console.log(this.parsed); // always true here
    }
  })
);

。

Answer 3

您所需要做的就是将

HTMLParsedElement

包裹在

connectedCallback 

 中

window.requestAnimationFrame

使用此方法，您将始终拥有所有可用的子节点。