javascript - Scala JS 扩展 HTMLElement 以创建 CustomElement

Question

摆弄 ScalaJS，我试图实现以下目标，即。创建自定义 Web 组件框架:

class DocumentPreview extends HTMLElement {
  static get observedAttributes() { return []; }
  constructor() {
    super();
    this.root = this.attachShadow({ mode: "open"});
  }

  connectedCallback() {
    let x = document.querySelector('link[rel="import"]#templates').import;
    this.root.appendChild(x.querySelector("#document-preview").content.cloneNode(true));
  }

  disconnectedCallback() {
  }
  attributeChangedCallback(name, oldValue, newValue) {
  }

  get document() {

  }

}

customElements.define("document-preview", DocumentPreview);

所以我谦虚地开始了

package mycomponent
import scala.scalajs.js
import scala.scalajs.js.annotation.JSExportTopLevel
import scala.scalajs.js.annotation.ScalaJSDefined
import scala.scalajs.js.annotation.JSExport
import org.scalajs.dom
import org.scalajs.dom.html
import org.scalajs.dom.raw.HTMLElement
import scala.util.Random

@JSExport
@ScalaJSDefined
class DocumentPreview extends HTMLElement {
  def connectedCallback(): Unit = {
    println("Connected!")
  }
  def disconnectedCallback(): Unit = {
    println("Disconnected!")
  }
}

这似乎让 sbt 快乐:

但是当我尝试在 Chrome 中实例化该类时:

> new mycomponent.DocumentPreview()

返回:

Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function

我需要做什么才能开始？最终，我习惯了打电话

    customElements.define("document-preview", DocumentPreview);

编辑

尝试按照建议修改build.sbt (?)

import org.scalajs.core.tools.linker.standard._

enablePlugins(ScalaJSPlugin, WorkbenchPlugin)

name := "MyComponent"

version := "0.1-SNAPSHOT"

scalaVersion := "2.11.8"

// in a single-project build:
scalaJSLinkerConfig ~= { _.withOutputMode(OutputMode.ECMAScript2015) }

libraryDependencies ++= Seq(
  "org.scala-js" %%% "scalajs-dom" % "0.9.1"
)

Answer 1

必须使用实际的 ECMAScript 2015 classes 声明自定义 Web 组件。使用 function 和 prototype 的 ES 5.1 风格的类不能用于此目的。

现在，默认情况下，Scala.js 发出符合 ECMAScript 5.1 的代码，这意味着 classes 被编译为 ES 5 函数和原型(prototype)。您需要通过启用 ECMAScript 2015 输出告诉 Scala.js 生成实际的 JavaScript classes。这可以在你的 build.sbt 中完成，如下所示:

import org.scalajs.core.tools.linker.standard._

// in a single-project build:
scalaJSLinkerConfig ~= { _.withOutputMode(OutputMode.ECMAScript2015) }

// in a multi-project build:
lazy val myJSProject = project.
  ...
  settings(
    scalaJSLinkerConfig ~= { _.withOutputMode(OutputMode.ECMAScript2015) }
  )

另见 extending HTMLElement: Constructor fails when webpack was used这是一个非常相似的问题，源代码在 JavaScript 中，但使用 Webpack 将其编译为 ECMAScript 5.1。