当webcomponent polyfill加载时，将“textContent”设置为undefined时，Firefox会抛出异常

Question

我们的团队正在开发原生的V1 Web组件。

一位同事正在收到错误，但仅在Firefox中运行一个组件的测试。

只有在将textContent的值设置为undefined时才会发生错误。

Answer 1

这是由于Shadow DOM polyfill中的following line。

  if (text.length > 0 || this.nodeType === Node.ELEMENT_NODE) {
      this.appendChild(document.createTextNode(text));
  }

在文件patch-accessors.js中：如果text.length设置为text，则null无效。

我打开了一个issue on github。

如果您不需要Shadow DOM，则只能导入不带Shadow DOM的polyfill：

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.20/webcomponents-hi-ce.js"></script> 

Answer 2

我创建了一个初始测试，它没有失败：

    var el = document.querySelector('#outside');
    el.textContent = 'value';
    el.textContent = undefined;

    <span id="outside"></span>

我们摸不着头脑，然后她指出这在她的Web组件中失败了。

所以我加载了polyfill并添加了代码来测试这样的Web组件：

    var el = document.querySelector('#outside');
    el.textContent = 'value';
    el.textContent = undefined;

    // Class for `<my-el>`
    class MyEl extends HTMLElement {
      constructor() {
        super();
      }

      connectedCallback() {
        this.innerHTML = '<span id="inner"></span>';

        var el = this.querySelector('#inner');
        el.textContent = 'value';
        el.textContent = undefined;
      }
    }

    // Define our web component
    customElements.define('my-el', MyEl);

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.20/webcomponents-lite.js"></script>
<span id="outside"></span>
<my-el></my-el>

令我惊讶的是，错误发生在Web组件中，而不是在将.textContent设置为外部元素的代码中。

因此，如果您尝试将textContent设置为undefined，则Web Components的现有polyfill会引发错误。

因此，通过以下方式保护您的代码：

el.textContent = newValue || '';

Answer 3

这是ShadyDOM的有效问题。我提交了Pull Request来解决问题：https://github.com/webcomponents/shadydom/pull/205

将textContent设置为undefined或null不应该失败，但将textContent设置为空字符串：