加载 webcomponent polyfill 时将 `textContent` 设置为 undefined 时 Firefox 抛出异常

Question

我们的团队正在开发本机 V1 Web 组件。

一位同事遇到错误，但仅在 Firefox 中，当运行她对一个组件进行测试时。

错误仅在将 textContent 的值设置为 undefined 时发生。

Answer 1

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

    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 组件的现有 polyfill 会抛出错误。

所以通过这样的方式保护您的代码：

el.textContent = newValue || '';

Answer 2

这是由于阴影 DOM polyfill 中的 following line。

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

在文件 补丁-accessors.js 中：如果 text 设置为 null，text.length 将无法工作。

我打开了 issue on github。

如果不需要 Shadow DOM 可以只导入没有 Shadow 的 polyfill DOM:

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

Answer 3

这是 ShadyDOM 的一个有效问题。我提交了将解决问题的合并请求：https://github.com/webcomponents/shadydom/pull/205

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

加载 webcomponent polyfill 时将 `textContent` 设置为 undefined 时 Firefox 抛出异常

Firefox throws exception when setting `textContent` to undefined when webcomponent polyfill loaded

javascript

firefox

web-component

polyfills