使用 coffeescript 創建自定義 web 組件時出錯

Question

我正在嘗試在 Rails 應用程序中創建自定義 HTML5 web 組件，但是在實例化 Javascript268CFDE6331C4BEB6 時出現錯誤

版本信息：
導軌 4.2.11.3
ruby 2.5.8
咖啡軌 4.1.1

我在一個最小的 Rails 應用程序中重現了這個問題，在https://github.com/fredwillmore/coffee_test

這是創建組件的coffeescript文件：

class ThingDoer extends HTMLElement
  # constructor: ->
  #   super()

customElements.define("thing-doer", ThingDoer);

這是coffeescript轉譯為：

ThingDoer = (function(superClass) {
    extend(ThingDoer, superClass);

    function ThingDoer() {
      return ThingDoer.__super__.constructor.apply(this, arguments);
    }

    return ThingDoer;

  })(HTMLElement);

customElements.define("thing-doer", ThingDoer);

錯誤：

沒有定義構造函數，我收到以下錯誤：

未捕獲的類型錯誤：無法構造“HTMLElement”：請使用“新”運算符，此 DOM object 構造函數不能作為 function 調用。

與只調用“super”的構造函數相同：

未捕獲的類型錯誤：無法構造“HTMLElement”：請使用“新”運算符，此 DOM object 構造函數不能作為 function 調用。

我嘗試了一個只調用new HTMLElement的構造函數：

未捕獲的類型錯誤：非法構造函數

我錯過了什么？

Answer 1

編譯后的腳本不適合，因為 class 已編譯為與自定義元素 API 不兼容的 ES5 樣式 class。

相反，您可以編寫一點原始 JavaScript 來生成真正的 class，然后使用CoffeeScript 的原型 Inheritance 語法為其增加更多方法：

ThingDoer = `class ThingDoer extends HTMLElement { constructor() { super(); this.initialize(); } }`

ThingDoer::initialize = ->
  @innerHTML = 'meow'

customElements.define "thing-doer", ThingDoer