Scala JS 扩展 HTMLElement 以创建 CustomElement
Scala JS extending an HTMLElement to make a CustomElement
摆弄 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 中实例化 class 时:
> new mycomponent.DocumentPreview()
这个returns:
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"
)
必须使用实际的 ECMAScript 2015 class
es 声明自定义 Web 组件。使用 function
s 和 prototype
s 的 ES 5.1-style 类 不能用于此。
现在,默认情况下,Scala.js 发出符合 ECMAScript 5.1 的代码,这意味着 class
es 被编译为 ES 5 函数和原型。您需要通过启用 ECMAScript 2015 输出告诉 Scala.js 生成实际的 JavaScript class
es。这可以在您的 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) }
)
另见 这是一个非常相似的问题,源代码在 JavaScript 中,但使用 Webpack 将其编译为 ECMAScript 5.1。
摆弄 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 中实例化 class 时:
> new mycomponent.DocumentPreview()
这个returns:
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"
)
必须使用实际的 ECMAScript 2015 class
es 声明自定义 Web 组件。使用 function
s 和 prototype
s 的 ES 5.1-style 类 不能用于此。
现在,默认情况下,Scala.js 发出符合 ECMAScript 5.1 的代码,这意味着 class
es 被编译为 ES 5 函数和原型。您需要通过启用 ECMAScript 2015 输出告诉 Scala.js 生成实际的 JavaScript class
es。这可以在您的 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) }
)
另见