Cannot get web component to work in codesandbox.io

Question

I'm trying to get a customized built-in web component to work in codesandbox.io. This is the code:

class MyDiv extends HTMLDivElement {
  constructor() {
    super();
  }
  connectedCallback() {
    this.innerHTML = "works!";
  }
}

customElements.define("my-div", MyDiv, {extends: 'div'});

<div is="my-div"></div>

The error I'm getting:

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

Tested in Chrome 67, Arch Linux. Here's the link: https://codesandbox.io/s/yqln560jzj

It does work here in a snippet, and it also works on codepen: https://codepen.io/connexo/pen/ZjEbqo

What am I missing here?

I'm not getting the above error in Firefox 61.0.1, instead I'm getting a blank page. — connexo, Jul 10 '18 at 07:33
The blank page, this is because there's nothing in the `div`. Put something inside it. — ADreNaLiNe-DJ, Jul 10 '18 at 07:34
Check the connectedCallback method. Also check the snippet here and on codepen. — connexo, Jul 10 '18 at 07:35

Supersharp · Answer 1 · 2018-07-11T16:20:20.320

0

If it doesn't works it's because Codesandbox is using a kind a Javascript preprocessor (Typescript?) on external JS files, that will execute the code before (to detect syntaxt errors or so on).

The customElements.define() method is called twice, and fails the second time it is called because you can define a custom element only one time.

You can see it by calling customElements.get() inside your script, and see it's already defined.

console.log( customElements.get( 'my-div' ) )

If you put the Javascript inline (in the HTML file index.html) in a element it will work fine.

Note that the second error you get it's because you are using the Babel preprocessor in the Codeopen snippet. You must disable Babel and it will work.

What am I missing here?

Nothing. It's codesandbox.io that is missing Custom Elements support.

edited Jul 11 '18 at 16:20

answered Jul 10 '18 at 07:45

Supersharp

29,002
9
92
134

As far as I can tell I did disable Babel. At first I enabled it (which added a .babelrc file), then I deleted that file and now the settings tell me Babel is not enabled. – connexo Jul 10 '18 at 08:08
There's always Typescript running hence the second error ("Failed to construct..."). Extended custom elements are not implemented correctly with JS preprocessors. – Supersharp Jul 10 '18 at 21:18

Cannot get web component to work in codesandbox.io

1 Answers1