Web 组件“无法设置属性‘innerHTML’为空”答案

【问题标题】：Web Component "Cannot set property 'innerHTML' of null"Web 组件“无法设置属性‘innerHTML’为空”
【发布时间】：2019-01-29 22:47:25
【问题描述】：

我创建了一个非常基本的自定义元素，它可以根据提供的属性person 更改其值。但是每当我加载自定义元素时，我都会收到此错误：Cannot set property 'innerHTML' of null。当我向 attributeChangedCallback 函数添加断点时，我确实可以看到加载时元素不存在。当我继续加载虽然元素加载完美。

我可以想象，因为我正在使用 webpack 捆绑我的所有文件，所以问题来自于在正文末尾加载元素，而不是在我的头脑中加载元素。

my-element.js：

class MyElement extends HTMLElement {
  constructor() {
     super();

     this.shadow = this.attachShadow({mode: 'open'});
     this._person = '';
  }

  get person() {
     return this._name;
  }

  set person(val) {
     this.setAttribute('person', val);
  }

  static get observedAttributes() {
     return ['person'];
  }

  attributeChangedCallback(attrName, oldVal, newVal) {
     let myElementInner = this.shadow.querySelector('.my-element-inner');

     switch (attrName) {
        case 'person':
           this._person = newVal;

           // ======================
           // The error occures here
           // ======================
           myElementInner.innerHTML = `My name is ${this._person}`;

     }
  }

  connectedCallback() {
     var template =
     `
        <style>
        .my-element-inner {
           outline: blue dashed 1px;
           background-color: rgba(0,0,255,.1);
        }
        </style>
        <span class="my-element-inner">My name is ${this._person}</span>
     `

     this.shadow.innerHTML = template;
  }
}
customElements.define('my-element', MyElement);

index.html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>WebPack Test Page</title>
</head>
<body>

  <my-element person="André"></my-element>

  <!-- Here goes the bundle.js -->
</body>
</html>

【问题讨论】：

this.shadow 从 `this.createShadowRoot();` 获取值，您将其用作 this.shadow.querySelector('.my-element-inner'); 那么从 this.createShadowRoot(); 返回的值是多少？调试它，你就会得到你的解决方案。
在声明myElementInner 后立即登录会发生什么？那里还有价值吗？
这是你的整个班级定义吗？ createShadowRoot() 的定义在哪里？
@JoelKoh 它是未定义的，那是我不太明白的
@JonWarren 很抱歉实际上是this.shadow = this.attachShadow({mode: 'open'});

标签： javascript webpack web-component custom-element

【解决方案1】：

attributeChangedCallback() 可以在 connectedCallback 之前或之后调用，具体取决于您的自定义元素的使用方式。

如果您将connectedCallback 逻辑移到构造函数中，那么一切都会好起来的

另一种选择是检查myElementInner 是否为null 并将您的代码保留在connectedCallback 中

class MyElement extends HTMLElement {
  constructor() {
    super();

    this.shadow = this.attachShadow({mode: 'open'});
    this._person = '';
    var template =
      `
        <style>
        .my-element-inner {
           outline: blue dashed 1px;
           background-color: rgba(0,0,255,.1);
        }
        </style>
        <span class="my-element-inner">My name is ${this._person}</span>
     `

    this.shadow.innerHTML = template;
  }

  get person() {
    return this._person;
  }

  set person(val) {
    this.setAttribute('person', val);
  }

  static get observedAttributes() {
    return ['person'];
  }

  attributeChangedCallback(attrName, oldVal, newVal) {
    let myElementInner = this.shadow.querySelector('.my-element-inner');

    switch (attrName) {
      case 'person':
        this._person = newVal;
        if (myElementInner) {
          myElementInner.innerHTML = `My name is ${this._person}`;
        }

    }
  }
}
customElements.define('my-element', MyElement);

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>WebPack Test Page</title>
</head>

<body>

  <my-element person="André"></my-element>

  <!-- Here goes the bundle.js -->
</body>

</html>

【讨论】：

@AndréKuhlmann 酷，以下是recommended reading，以防您需要了解更多