webcomponent polyfillがロードされたときに `textContent`を未定義に設定すると、Firefoxが例外をスローします

Question

私たちのチームはV1 Webコンポーネントを開発しています。

仲間の従業員はエラーが発生していましたが、Firefoxでは1つのコンポーネントに対してテストを実行していました。

textContentの値をundefinedに設定するとエラーが発生しました。

Answer 1

私は最初のテストを作成し、それが失敗しない：

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

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

私たちは、私たちの頭に傷、その後、彼女はこれが彼女のWebコンポーネントに失敗したことを指摘しました。

だから私はポリフィルをアップロードされ、このような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コンポーネント用の既存のポリフィルでエラーがスローされます。

だからあなたのコードは、このような何かによって保護：

el.textContent = newValue || ''; 

Answer 2

それはシャドウDOMのポリフィルにfollowing lineによるものです。ファイルパッチaccessors.jsで

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

：textがnullに設定されている場合text.lengthが動作することはできません。

私はissue on githubを開設しました。

あなたはシャドウDOMなしのみポリフィルをインポートすることができますシャドウDOMを必要としない場合：

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

Answer 3

これはShadyDOMで有効な問題です。私はこの問題を修正するプル要求を提出：undefinedまたはnullにtextContentを設定https://github.com/webcomponents/shadydom/pull/205

は失敗しますが、空の文字列にtextContentを設定しないでください。