JS APIでポリ充てんされたDOMノードが返されました

Question

私は<data>要素をHTMLで使用していますが、これはまともなサポートを提供していますが、私の目的には十分ではありません。 の追加機能がHTMLDataElementにあるのは、それぞれの属性を返すvalueのゲッターです。もちろん

これはちょうど（もちろんの特徴検出後、）次のコードを使用し、実装するのは簡単です

class HTMLDataElement extends HTMLElement { 
    constructor() { 
     super(); 
    } 

    get value() { 
     return this.getAttribute(`value`); 
    } 
} 

これは素晴らしい作品。 1つの問題：getElementById、querySelectorなどのネイティブAPIを使用する場合、返されるNodeはインスタンスHTMLDataElementではありません。これが可能であれば、どうすればいいですか？

<data>のブラウザのサポートの有無にかかわらず同じように動作するように、私はdocument.querySelector('foo').valueを実行したいと思います。

は（私はちょうど .getAttribute('value')代わり .valueの使用できることを十分承知している。ポイントは、私はしたくないです。）

Answer 1

Twitterのジョナサン・ニール*に手を差し伸べるした後、彼は偉大な例を提供しましたどのようにこれを行うことができますか。彼はnpmにこのコードを公開しようとしています。

if (!this.HTMLDataElement) { 
 
    this.HTMLDataElement = this.HTMLUnknownElement; 
 

 
    const valueDescriptor = Object.getOwnPropertyDescriptor(HTMLDataElement.prototype, 'value'); 
 

 
    Object.defineProperty(
 
     HTMLDataElement.prototype, 
 
     'value', 
 
     valueDescriptor || { 
 
      get() { 
 
       return 'DATA' === this.nodeName && this.getAttribute('value'); 
 
      } 
 
     } 
 
    ); 
 
} 
 

 
console.log('data:', document.querySelector('data').value); 
 

 
console.log('xdata:', document.querySelector('xdata').value);

<data value="this should work"> 
 
<xdata value="this should not work">

*不慣れなため、ジョナサン・ニールはPostCSSの生みの親であり、多くのpolyfillsに自分自身を作成し​​ました。