Web 组件“无法将属性‘innerHTML’设置为 null”

Question

我创建了一个非常基本的自定义元素，它可以根据提供的属性更改其值

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>

Answer 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>

Answer 2

另一种选择是在

this.isConnected

中选中

attributeChangedCallback

，以尝试阻止其在

connectedCallback

之前运行。

由于规范鼓励将尽可能多的设置推送到

connectedCallback

，这对于某些开发人员来说可能更可取。

Web 组件“无法将属性‘innerHTML’设置为 null”

问题描述投票：0回答：2

2个回答

最新问题

Web 组件“无法将属性‘innerHTML’设置为 null”

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2