javascript - 让 JS API 返回一个 polyfilled DOM 节点

Question

我正在使用 <data> HTML 中的元素，它有不错的支持，但不足以满足我的目的。 HTMLDataElement 中的唯一 额外功能是 value 的 setter/getter ，返回相应的属性。

当然这实现起来很简单，只需使用以下代码(当然是在特征检测之后)

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

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

这很好用。只有一个问题:使用 native API 时，例如 getElementById , querySelector等，返回的节点不是实例 HTMLDataElement .如果可能的话，我怎样才能做到这一点？

明确地说，我希望能够做到 document.querySelector('foo').value ，无论浏览器是否支持 <data>，其行为都相同.

(我很清楚我可以只使用 .getAttribute('value') 而不是 .value 。关键是我不想。)

Answer 1

在 Twitter 上联系 Jonathan Neal* 后，他提供了一个很好的例子来说明如何做到这一点。

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

* 对于不熟悉的人，Jonathan Neal 是 PostCSS 插件的重要贡献者，他自己创建了许多 JavaScript polyfill。