如何在 Web 组件的 ReasonML 中扩展 JavaScript HTMLElement class？

Question

下面的JavaScript代码，请问ReasonML怎么写？

class HelloWorld extends HTMLElement {
  constructor() {
    super();
    // Attach a shadow root to the element.
    let shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `<p>hello world</p>`;
  }
}

我找不到任何关于在 ReasonML 中编写 classes 的文档？我不能使用普通的 objects/types，因为我需要从 HTMLElement class 扩展，它不适用于 .

我已经研究过这个但是，这是另一回事。要编写 Web 组件，我们需要扩展 HTMLElement 并且必须使用 new 关键字调用它。 ES5 样式扩展机制不起作用。

Answer 1

你不能。至少不直接，因为 BuckleScript（Reason 用来编译 JavaScript）以 ES5 为目标，因此不了解 ES6 classes.

幸运的是，ES6-classes 不需要特殊的运行时支持，而只是作为语法糖实现，这就是为什么您可以将 ES6 转换为 ES5，如您 link 到的问题所示.然后，您真正需要做的就是将此转译后的输出转换为 ReasonML：

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var BaseElement = (function (_super) {
    __extends(BaseElement, _super);
    function BaseElement() {
        _super.call(this);
    }
    return BaseElement;
}(HTMLElement));

根据您实际需要的具体 class 功能，您可能可以稍微简化它。

如何在 Web 组件的 ReasonML 中扩展 JavaScript HTMLElement class？

How to extend JavaScript HTMLElement class in ReasonML for web component?

class

ffi

reason

bucklescript