Scala Js Extending An Htmlelement To Make A Customelement

Fiddling with ScalaJS, I am trying to achieve the following, ie. create a custom web component skeleton: class DocumentPreview extends HTMLElement { static get observedAttributes

Solution 1:

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.