Scala JS extending an HTMLElement to make a CustomElement

Question

Fiddling with ScalaJS, I am trying to achieve the following, ie. create a custom web component skeleton:

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);

So I am starting humbly with this

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!")
  }
}

which seems to make sbt happy:

But when I try to instantiate the class in Chrome:

> new mycomponent.DocumentPreview()

this returns:

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

What do I have to get started right? Eventually, I am used to calling

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

EDIT

Attempt to modify build.sbt as suggested (?)

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

the `@JSExport`. I just trying to get this to work. Perhaps that is just the wrong annotation altogether. — VH-NZZ, Nov 26 '17 at 02:53

score 1 · Accepted Answer · answered Nov 26 '17 at 11:20

Custom Web components must be declared using actual ECMAScript 2015 classes. The ES 5.1-style classes using functions and prototypes cannot be used for this.

Now, by default, Scala.js emits ECMAScript 5.1 compliant code, which means that classes are compiled down to ES 5 functions and prototypes. You need to tell Scala.js to generate actual JavaScript classes by enabling the ECMAScript 2015 output. This can be done in your build.sbt as follows:

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) }
  )

See also extending HTMLElement: Constructor fails when webpack was used which is a very similar question where the source is in JavaScript but using Webpack to compile it down to ECMAScript 5.1.

Do I need a specific version of ScalaJS? I edited my answer with the `build.sbt` that I worked with from the ScalaJS from the e-book but now that still doesn't work: `/tmp/mycomponent/build.sbt:11: error: not found: value scalaJSLinkerConfig scalaJSLinkerConfig ~= {_.withOutputMode(OutputMode.ECMAScript2015) }`. Thanks for your kind help — VH-NZZ, Nov 26 '17 at 11:48
Good, this now compiles and I managed to instantiate the class in the browser. With `-P:scalajs:sjsDefinedByDefault`, the only annotation that I seem to need is `JSExportTopLevel` now. — VH-NZZ, Nov 27 '17 at 01:20

Scala JS extending an HTMLElement to make a CustomElement

1 Answers1

Linked